如何綁定primeng Angular的多選下拉數據

Question

我在表單中使用primeng Multiselect 下拉菜單。

單擊編輯按鈕時，我想在所有字段中顯示現有數據。 對於輸入文本，它在我使用 [(ngModel)] 時顯示，我也對多選下拉菜單進行了同樣的嘗試，但它不起作用。

所以我無法綁定多選下拉列表的值。 我嘗試使用 for 循環，但值沒有出現在字段中。

      <div *ngFor ="let role of resource.roles;">
        {{role.name}}
        <p-multiSelect
        [options]="resourceRoles | dropdownToValuePipe"
        placeholder="Select"
        name = "roles"
        id="roles"
        [(ngModel)]="role.name"
        ngModel
        required
        appendTo="body"
      >
      </p-multiSelect>
      </div>

Answer 1

使用您當前的代碼，您正在為資源/用戶擁有的每個角色創建一個多選。 我認為這不是您想要的，否則您可能只會使用普通的下拉菜單。

所以如果你真的只想要一個多選，你會做這樣的事情：

  <p-multiSelect
    [options]="resourceRoles"
    optionLabel="name"
    placeholder="Select"
    name="roles"
    id="roles"
    [(ngModel)]="resource.roles"
    required
    appendTo="body"
  >
  </p-multiSelect>

我不確定 pipe 在做什么，如果您使用optionLabel可能不需要它。 我還刪除了重復的ngModel 。

如果resourceRoles中的對象與resource.roles中的對象不同，您可能還想嘗試使用dataKey="roleId" 。 這將匹配基於roleId而不是使用 object 相等性的選擇