ngModel 和 ng 用于选择选项

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>

文本区域永远不会出现。

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

显示： [ { "名称"： "效果"， "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变量自然是一个数组。您可以尝试使用数组map函数从所有选定元素中收集desc属性。

控制器

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数组具有太多元素时，这将是一个瓶颈，因为每次调用都会迭代整个数组。