Javascript 角度5,组件正在无故初始化

Javascript 角度5,组件正在无故初始化,javascript,angular,typescript,angular-reactive-forms,Javascript,Angular,Typescript,Angular Reactive Forms,我有以下问题- A部分: <!-- LIST OF URLs--> <exl-file-list *ngIf="hasLinks()" listTitle="Added links:" [expandable]="editableFiles" expandAllButton="Edit metadata" (edit)="onLinkEdit($event)" (expandAll)="allLinksEditable = !allLinksEdit

我有以下问题-

A部分:

<!-- 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>
它的内容是:

updateLinkDescription(index, description){
  const link = this.links.at(index) as FormGroup;
  link.setControl('description', new FormControl(description));
}
depositFormDataService.mainForm将链接保存为FormArray。 link是一个具有三个formControls的对象,其中一个是“description”


每次调用
onchangescription()
时,都会调用
exl文件列表项的
构造函数
esp存款链接元数据
,并刷新所有视图,我没有任何原因。

每当您在
存款表单数据服务.mainForm.value.links
中进行任何更改时,角度检测更改,并再次渲染内容

由于您已在depositFormDataService.mainForm.value.links的
*ngFor=“let link”中使用了这两个组件,因此它将重新初始化该组件

在ts中 在html中
虽然我看到了这一点,但根据它的说法,它不应该再次呈现内容。如果不查看整个代码,很难说出确切的问题,但是您可以使用
trackBy
来修复它。更新了我的答案。添加了“trackBy”“该组件不会被重新初始化?是的,不会。”。通过这种方式,我们可以告诉用户链接是否与以前相同,并且不需要重新迭代。谢谢!关于您之前给我的“[(ngModel)]=”说明“(ngModelChange)=”onChangeDescription()“”注释-如果我写[ngModel],说明字段根本不会更新。。
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));
}
trackByLink = (index: number, link : any) => link.url; //check if you have `url` if not then you other unique property.
`*ngFor="let link of depositFormDataService.mainForm.value.links ; trackBy:trackByLink `