Angular 5, компонент инициализируется без причины

У меня следующая проблема-

компонент А:

<!-- LIST OF URLs-->
<exl-file-list  
  *ngIf="hasLinks()"
  listTitle="Added links:"
  [expandable]="editableFiles"
  expandAllButton="Edit metadata"
  (edit)="onLinkEdit($event)"
  (expandAll)="allLinksEditable = !allLinksEditable"
  (removeAll)="onRemoveAllLinks()">

  <!-- URL items -->
  <exl-file-list-item
    *ngFor="let link of depositFormDataService.mainForm.value.links let index = index"
    [item]="link"
    [index]="index"
    (remove)="onLinkRemove($event)"
    (edit)="onLinkEdit($event, index)">

    <!-- metadata of each URL -->
    **<esp-deposit-link-metadata
    [index]="index">
    </esp-deposit-link-metadata>**

  </exl-file-list-item>
</exl-file-list>

компонент B- esp-deposit-link-metadata:

<div class="metadata-container">
  <mat-form-field class="hasnt-underline">
    <mat-label>Description</mat-label>
    <textarea 
      matInput 
      [(ngModel)]="description" 
      **(ngModelChange)="onChangeDescription()" 
      ** #textarea placeholder="Describe the link" 
      matTextareaAutosize></textarea>
  </mat-form-field>
</div>

onChangeDescription, обновил мой formGroup в depositFormDataService.mainForm.links

onChangeDescription(){
  this.depositFormDataService
    .updateLinkDescription(this.index,this.description);
}

это содержание:

updateLinkDescription(index, description){
  const link = this.links.at(index) as FormGroup;
  link.setControl('description', new FormControl(description));
}

depositFormDataService.mainForm содержит ссылки как FormArray. link - это объект с тремя formControls, один из которых - description.

Каждый раз, когда вызывается onChangeDescription(), вызываются constructor из exl-file-list-item и esp-deposit-link-metadata, и все представление обновляется, и у меня нет причин, почему.


person danda    schedule 17.10.2018    source источник
comment
Спасибо! относительно [(ngModel)] = description (ngModelChange) = onChangeDescription () комментарий, который вы мне дали раньше - если я напишу [ngModel], поле описания вообще не обновится ..   -  person danda    schedule 17.10.2018


Ответы (1)


Каждый раз, когда вы вносите какие-либо изменения в depositFormDataService.mainForm.value.links, Angular обнаруживает изменения и снова отображает содержимое.

Поскольку вы использовали оба этих компонента внутри *ngFor="let link of depositFormDataService.mainForm.value.links, он повторно инициализирует компонент.

in ts

trackByLink = (index: number, link : any) => link.url; //check if you have `url` if not then you other unique property.

в html

`*ngFor="let link of depositFormDataService.mainForm.value.links ; trackBy:trackByLink `
person Sunil Singh    schedule 17.10.2018
comment
Хотя я видел это ... title = "выполняет ли директива ngfor повторный рендеринг всего массива при каждой мутации"> stackoverflow.com/questions/42244690/ Согласно ему, он не должен снова отображать контент. - person danda; 17.10.2018
comment
Трудно определить точную проблему, не глядя на весь код, однако вы можете исправить ее, используя trackBy. Обновил свой ответ. - person Sunil Singh; 17.10.2018
comment
При добавлении трека компонент не будет повторно инициализирован? - person danda; 17.10.2018
comment
Да не будет. Таким образом, мы сообщаем, является ли ссылка такой же, как и раньше, и повторная итерация не требуется. - person Sunil Singh; 17.10.2018