ngModel和ngFor选择选项

Question

我正在做一个随选定选项而变化的表格。

<select multiple class="form-control col-6" id="efeitos" [(ngModel)]="test" name='effect'>
                <option *ngFor='let eff of effects' [ngValue]="eff">{{eff.name}}</option>
            </select>
            <textarea class="col-5" readonly>{{test.desc}}</textarea>

textarea永远不会出现。

<p>{{test | json}}</p>

显示：[{“ name”：“ effect”，“ desc”：“ Lorem ipsum dolor”}]而不是所需的{“ name”：“ effect”，“ desc”：“ Lorem ipsum dolor”}

第一篇文章，请帮忙

Answer 1

您在test中获得了数组，因为您使用了multiple属性，只需删除multiple（如果您需要multiple，那么我认为Array是给您的预期结果）

Answer 2

也可以这样：{{

{{test [0] | json}}

}}

Answer 3

将属性multiple提供给select标签时，可能会有多个选择。因此，test变量自然是一个数组。您可以尝试使用数组desc函数从所有选定元素中收集map个属性。

控制器

export class AppComponent  {
  ...
  test: Effect[] = [{ 'name': '', 'desc': 'please select an effect'}];

  getDesc() {
    return this.test.map(item => item.desc)
  }
}

模板

<textarea class="col-5" readonly>
{{ getDesc() }}
</textarea>

注意：此方法效率低下。如果您不是手动控制更改检测策略，则getDesc()函数可能会被多次调用。当test数组中的元素过多时，这将成为瓶颈，因为每次调用都会重复整个数组。