Question

我正在 NgFor 中填充组件（ ContactUpdatableItem ）：

 <section
        class="plContactCreation-listItem"
        *ngFor="let contact of contacts$ | async; index as idx"
      >
        <contact-updatable-item
          [contact]="contact" // This line will not work
        >
        </contact-updatable-item>
 </section>

填充的组件通过 @Input 设置器监听 Contact 的更改：

export class ContactUpdatableItemComponent {
  @Input()
 set contact(contact: RestaurantLocationContactFragment) {
   this.bindContactData(contact);
 }
 get contact(): RestaurantLocationContactFragment {
    return this.modifiedContact$.value;
   }
}

@Input 设置程序将在加载组件时仅调用一次，而不再调用。如果我将 ContactUpdatableItem 更改为通过 async 进行更新，它将可以正常工作并正确呈现：

  <section
      class="plContactCreation-listItem"
      *ngFor="let contact of contacts$ | async; index as idx"
          >
            <contact-updatable-item
              [contact]="(contacts$ | async)[idx]" // This line will work
            >
            </contact-updatable-item>
 </section>

但是我不想使用它：

 [contact]="(contacts$ | async)[idx]"

如何使我的组件呈现，并使用自定义的setter功能，而又不会使用异步和当前索引来欺骗技巧？

所以我的代码将如下所示：

 [contact]="contacts"

NgFor嵌套组件不会在@Input更改时更新

0 个答案: