我有以下问题-
组件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>
组件 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
方法,在 depositFormDataService.mainForm.links
中更新了我的 formGroup
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 是一个具有三个 formControl 的对象,其中一个是“description”。
每次 onChangeDescription()
被调用 exl-file-list-item
和 esp-deposit 的
被调用,所有 View 都被刷新,我不知道为什么。构造函数
-link-metadata
最佳答案
每当您在 depositFormDataService.mainForm.value.links
中进行任何更改时,Angular 都会检测更改并再次呈现内容。
由于您在 *ngFor="let link of depositFormDataService.mainForm.value.links
中使用了这两个组件,它将重新初始化该组件。
在 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 `
关于javascript - Angular 5,组件正在无故初始化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52847114/