Webangular2dev

Angular 2 - Заметки

angular2

Страница прыгает при обновление модели

Часть кода из pipe 

1
2
3
4
transform(inputList: item[], filterTrigger: string): item[] {

      resultList = inputList;
      // resultList = JSON.parse(JSON.stringify(inputList));

Предположение как это работает:

Если вернуть новую сслыку на коллекцию, то рендерится с нуля, текущая позиция скрола в браузере будет потеряна, так как список схлопнулся. Если ссылку оставить от прежнего объекта, то элементы остануться и ангуляр 2 перерисует странцу на прежнем месте.

Для очистки списка используем такой способ. Затем можно вставить элементы в массив, и страница не будет дергаеться.

1
2
3
resultList.length = 0;

resultList.push(listItem);

Дождаться когда отработает рендеринг на элементе

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  private _innerHtmlBlock;
  private _lastClickedIndex = 0;

  @ViewChildren('innerHtmlBlock')
  set innerHtmlBlock(value) {
    console.log('set innerHtmlBlock');
    this._innerHtmlBlock = value;

    if (this.inputConfig[this._lastClickedIndex].opened) {
      this.cssValue = this.getNewCssValue(this._lastClickedIndex);

      // because the css value we changed above
    **  this.changeDetector.detectChanges();**
    }
  }

  get innerHtmlBlock() {
    console.log('get innerHtmlBlock');
    return this._innerHtmlBlock;
  }


when [hidden]="true_or_false"
dont work
--
work only with ngIf

Варианты решения ExpressionChangedAfterItHasBeenCheckedError

https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked on ng 4
https://github.com/angular/angular/issues/17572

1
2
3
4
5
6
7
8
9
10
But, I found workaround.
Injection of ChangeDetectionRef, and call detectionChanges() function at error point.

constructor(private cdr: ChangeDetectionRef) {
}

onChange(): void {
  this.val += 1; // <- get error after
  this.cdr.detectionChanges();
}

Ошибка ExpressionChangedAfterItHasBeenCheckedError при добавлении элемента формы

Есть форма с валидацией, в форме есть массив элементов , есть кнопка сабмит,
если заполнить поля в форме, и нажать сабмит, то форма будет провалидирована.
Если сейчас добавить элемент в массив, который будет с не заполненными полями, то форма станет не валидной.
НО при этом будет ошибка

MainControl.html:19 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked. Previous value: ‘ngIf: false’. Current value: ‘ngIf: true’. 

1
2
3
4
5
6
7
8
9
10
11
12
<p-panel header="Title" *ngIf="listControl.controls.length">

  <div formArrayName="listControlElements">
    <div *ngFor="let item of listControl.controls; let i=index">

      <app-ControlValueAccessorComponent 
          formControlName="{{i}}" [parentForm]="mainForm" (onInnerEvent)="checkPostion($event)">
      </app-ControlValueAccessorComponent>

    </div>
  </div>
</p-panel>

Разница между changeDetector и markForCheck

Все, что вам нужно знать об обнаружении изменений в Angular
https://habr.com/ru/post/327004/

Upload file to server

FormData
https://learn.javascript.ru/formdata

https://stackoverflow.com/questions/40214772/file-upload-in-angular

https://stackoverflow.com/questions/42546594/form-validation-not-happening-on-angular-2-for-input-type-file

https://angular.io/guide/testing#component-dom-testing

A cold observable doesn’t produce values until you subscribe to it. Most of your application observables are cold. All HttpClient methods return cold observables. A hot observable is already producing values before you subscribe to it. The Router.events observable, which reports router activity, is a hot observable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

nameInput.dispatchEvent(newEvent('input'));
fixture.detectChanges();

---

// The safest way to get the injected service, the way that always works, is to get it from the injector of the component-under-test. 
// The component injector is a property of the fixture's DebugElement.
// WelcomeComponent's injector

// UserService actually injected into the component
userService = fixture.debugElement.injector.get(UserService);

---

Обновить nodejs и пофиксить node-sass

Перешел с nodejs8 на 12, и проект ангуляра2 перестал собираться.

Error: Node Sass does not yet support your current environment: Linux 64-bit
https://github.com/sass/node-sass/issues/1651

npm uninstall node-sass -g && node cache clean && node install node-sass

Как победить Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (64)?
https://qna.habr.com/q/701855

https://nodejs.org/en/download/

Share