在创建新组时，在动态形式的值中观察可观察的值

Question

所以我在这里有一个小问题...我可以观察到以表格中的accountId的价值更改，然后获取与该帐户关联的消息列表。

this.accountMessagesDataSource$ = this.piForm.get('accountId').valueChanges
    .switchMap(query => this.pitching.getAccountMessage(query));

然后以形式使用。

<div formArrayName="_messages"
    *ngFor="let row of _messages.controls; let i=index;"
    class="mb-3">
    <div [formGroupName]="i">
        <div class="container-fluid">
            <div class="row">
                <div class="col-11">
                    <select class="btn-underline-primary btn-block"
                        (change)="messageSelect($event.target.value, i)">
                        <option value="" selected="">Choose from list</option>
                        <option *ngFor="let message of accountMessagesDataSource$ | async"
                            [value]="message.accountMessageId">
                                {{ message.message }}
                        </option>
                    </select>
                </div>
                <div class="col-1">
                    <button class="btn btn-danger btn-sm mr-1" (click)="deleteRow(i, '_messages')">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

捕获的是，当我启动添加新行的方法时...

<button type="button"class="btn btn-primary btn-sm mr-2"
    (click)="addNewRow('_messages')">
    <i class="fa fa-plus"></i>
</button>

插入了一个新的行，但是现在没有填充循环，我注意到如果我以表格重新选择帐户，则填充了所有选择框，然后填充了所有选择框Valuechanges我的想法是将其映射到另一个属性，因为我只需要在帐户更改时一次结果...

Answer 1

当您添加一行时，整个数组是在UI中重新绘制的。

要避免这种行为(无论如何，这是一个很好的做法(，您应该在*ngFor上添加trackBy功能：

html：

*ngFor="let row of _messages.controls; trackBy: trackById; let i=index;"

ts：

class YourComponent {
  ...
  trackById(index: number, item: YourTipeItem) {
    return item.id; // or whatever that is unique on your item
  }
  ...
}