двусторонняя привязка формы множественного выбора - PullRequest
Новая
       36

двусторонняя привязка формы множественного выбора

0 голосов
/ 26 мая 2020

У меня есть форма множественного выбора: 

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

Я хочу отображать параметры, выбранные пользователем в форме с помощью <p>You selected: {{selected}}</p>, но если я сделаю это таким образом, то при выборе 3 начинок получаю: 

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

Теперь я попробовал <p>You selected: {{selected?.value}}</p> Я не получил никакой записи.

Единственное решение, которое я нашел до сих пор: <p>You selected: {{selected | json}}</p>, но я не хочу целиком json свойство объекта просто значение.

Как мне получить его для отображения: 

You selected: option1, option2, option3

?

Ответы [ 3 ]

1 голос
/ 26 мая 2020

Печать «[объект, объект]» означает, что вы пытаетесь использовать объект как строку.

toppings - массив объектов. Вы просматриваете этот массив с помощью let topping of toppings и назначаете объект topping.

{{topping.value}} печатает строку в свойстве .value объекта topping, но вы вернули весь объект в [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>

- L oop через выбранный массив 

<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 создание шаблонов и привязка данных.

0 голосов
/ 26 мая 2020 
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>
0 голосов
/ 26 мая 2020

Вы можете создать новое свойство для компонента для привязки в шаблоне или создать новый канал для отображения элементов, разделенных запятыми.

Без канала: 

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