如何在angular中的表td中显示多选下拉值 8

Question

我有一个表单，其中有下拉菜单和多个 select 下拉菜单，在提交表单值时，我们将在表中显示这些值。

至于多 select，用户可以 select 多个值，因此数据保存为数组，如下所示 -

[
{id: "xyz", name: "Developer Back"},
{id: "xyz", name: "Developer front"}
]

角色表格结构-

html -

<div class="p-field form-group">
  <div class="row">
    <div class="col-md-4">
      <label for="role" class="col-form-label">Role</label>
    </div>
    <div class="col-md-8">
      <p-multiSelect
        [options]="resourceRoles | dropdownToValuePipe"
        placeholder="Select"
        name="roles"
        id="roles"
        ngModel
        required
        appendTo="body"
      >
      </p-multiSelect>
    </div>
  </div>
</div>

如何在表的角色列中显示这多个值？

td{{ roles }} </td>

请帮助为上述问题提供一些解决方案。

Answer 1

你可以做类似的事情

<td>
  <span *ngFor="let role of roles">{{role.name}}</span>
</td>

可能需要一些样式才能使其看起来不错