Question

我有一个多选表格：

<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>

我想显示用户在You selected: {{selected}}表单下选择的选项，但是如果这样做，我会在选择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

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 2

打印“ [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>

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

Answer 3

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

没有管道：

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

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

使用管道，您还可以在其他组件中重复使用，并且不需要添加吸气剂：

@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>

多重选择形式双向绑定

3 个答案: