多个select表单双向绑定

Question

我有多个 select 表格：

<mat-form-field>
    <mat-label>Toppings</mat-label>

    <mat-select  [(value)]="selected"  multiple>
        <mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
    </mat-select>

</mat-form-field>
<p>You selected: {{selected}}</p>

我想显示用户 select 在 You selected: {{selected}} 表单下编辑的选项，但如果我这样做，我会在 select 3 种配料时得到：

   You Selected: [object Object],[object Object],[object Object]

现在我试了You selected: {{selected?.value}}我没有得到任何条目。

到目前为止我找到的唯一解决方案是： You selected: {{selected | json}} 但我不希望整个 json 对象只是值属性.

如何让它显示：

You selected: option1, option2, option3

?

Answer 1

您可以在要绑定到模板中的组件上创建一个新的属性，或者创建一个新的管道来显示逗号分隔的项目。

没有管道：

get displaySelections(): string {
  return this.selections.map(s => s.value).join(', ');
}

<p>You selected: {{displaySelections}}</p>

使用管道，您也可以在其他组件中重复使用，并且不需要添加 getter:

@Pipe({
  name: 'join'
})
export class JoinPipe implements PipeTransform {
  transform(value: {value: any}[]): string {
    return value.map(v => v.value).join(', ');
  }
}

<p>You selected: {{ selections | join }}</p>

Answer 2

Try Changing your HTML to :- 

<mat-form-field>
    <mat-label>Toppings</mat-label>

    <mat-select  [(value)]="selected"  multiple>
        <mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
    </mat-select>

</mat-form-field>
<p>You selected: {{selected | json}}</p>

Answer 3

打印“[object, object]”意味着您正在尝试将对象用作字符串。

toppings 是一个对象数组。您正在使用 let topping of toppings 遍历此数组并将对象分配给 topping.

{{topping.value}} 打印顶部对象 .value 属性中的字符串，但您在 [value]="topping".

中分配回整个对象

这样 selected 就变成了一个对象数组，尽管您在单击选项时只能看到字符串。

两种方式实现你想要的；

- 从选项传递字符串

<mat-form-field>
    <mat-label>Toppings</mat-label>

    <mat-select  [(value)]="selected"  multiple>
        <mat-option *ngFor="let topping of toppings" [value]="topping.value">{{topping.value}}</mat-option>
    </mat-select>

</mat-form-field>
<p>You selected: {{selected}}</p>

- 遍历所选数组

<mat-form-field>
    <mat-label>Toppings</mat-label>

    <mat-select  [(value)]="selected"  multiple>
        <mat-option *ngFor="let topping of toppings" [value]="topping">{{topping.value}}</mat-option>
    </mat-select>

</mat-form-field>
<p>You selected: 
    <span *ngFor="let s of selected; let f = first; let l = last;">
        {{s.value}}
        <span *ngIf="!(f && l) && !l">,</span>
    </span>
</p>

我希望这可以帮助您阐明 angular 模板和数据绑定。

多个select表单双向绑定

multiple select form two-way binding

forms

json

angular-material

angular

two-way-binding