如何将数组中的值添加到表单？

Question

当您单击“编辑任务”时，将打开一个表单，其中已包含任务的值。这已经适用于简单的字符串，但不适用于具有值数组的值。

问题：

一项任务可以分配给几个人。但是，已经分配的人不会被选中。

我已经研究过，但无法在我的代码上实现该解决方案：

FormArray 对象上的 patchValue？

如何在 Angular 中使用 FormArray

Stackblitz 演示：

https://stackblitz.com/edit/stackblitz-starters-1ksmca?file=src%2Fmain.ts

最相关的代码：

ts 文件：

export class TaskFormComponent {
  protected readonly Object = Object;
  taskForm!: FormGroup;
  fromPopup = false;

  constructor(
    @Optional()
    @Inject(MAT_DIALOG_DATA)
    public data: { fromPopup: boolean; task: Task }
  ) {}

  ngOnInit() {
    this.fromPopup = !!this.data?.fromPopup;
    this.taskForm = new FormGroup({
      assignedTo: new FormControl(''),
    });

    if (this.data?.task) {
      this.taskForm.setValue({
        assignedTo: this.data.task.contacts,
      });
    }
  }

  public onSubmit() {
    console.log('Submitted');
  }
}

html 文件：

<div>
  <div>
    <div mat-dialog-title>Edit Task</div>
  </div>

  <mat-dialog-content>
    <form [formGroup]="taskForm" (ngSubmit)="onSubmit()">
      <mat-form-field>
        <mat-label>Assigned to</mat-label>
        <mat-icon color="primary" matSuffix>group_add</mat-icon>
        <mat-select formControlName="assignedTo" multiple>
          @for (contact of this.data.task.contacts; track contact.id) {
          <mat-option [value]="contact.id">{{ contact.name }}</mat-option>
          }
        </mat-select>
      </mat-form-field>
    </form>
  </mat-dialog-content>

  <mat-dialog-actions>
    <button mat-raised-button color="primary" type="submit">
      {{ data?.task ? 'Update Task' : 'Create Task' }}
    </button>
    <button mat-raised-button mat-dialog-close type="button" color="warn">
      Close
    </button>
  </mat-dialog-actions>
</div>

Answer 1

这个问题可能看起来很广泛，但我会尝试集中回答最初的问题。在 HTML 中访问数组值的一种方法是使用 NgFor 迭代变量，例如：

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>