Выбор углового материала - проблема с отображением выбранного значения - PullRequest
Новая
       13

Выбор углового материала - проблема с отображением выбранного значения

0 голосов
/ 22 марта 2019

Я использую угловой материал, выберите: https://material.angular.io/components/select/examples

И в моем приложении я использую много входов выбора, и все они имеют общий массив опций между ними. Пример массива опций: 

  foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}];

И моя проблема в том, что, когда я выбираю любое значение и затем сбрасываю свой массив опций, например, нажатием кнопки, выбранное значение исчезает со всех выбранных входов.

Есть ли способ сохранить выбранное значение видимым на входе выбора, когда я сбрасываю массив параметров выбора или когда я помещаю явно новые значения в массив параметров?

Отредактировано:

Чтобы быть более понятным, давайте рассмотрим этот код:

Файл TS: 

foods: Food[] = [
{value: 'steak-0', viewValue: 'Steak'},
{value: 'pizza-1', viewValue: 'Pizza'},
{value: 'tacos-2', viewValue: 'Tacos'}];

selected = 'pizza-1';

resetOptions() {
    this.foods = [];
}

HTML: 

<mat-form-field>
    <mat-label>Favorite food</mat-label>
    <mat-select name="food" [(value)]="selected">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
</mat-form-field>

<p>{{selected}}</p>

<button (click)="resetOptions()">Reset Options</button>

И когда я выбираю значение, «выбранное» свойство в основном обновляет значение, и это значение появляется на выбранном входе, , но когда я нажимаю кнопку «Сбросить настройки», «выбранное» свойство все еще сохраняет свое значение, но это значение исчезает с выбранного входа.

1 Ответ

0 голосов
/ 22 марта 2019

HTML 

<mat-form-field>
    <mat-label>Favorite food</mat-label>
    <mat-select name="food" [(value)]="selected">
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
</mat-form-field>

TS 

selected = 'pizza-1';

foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
];

Попробуйте приведенный выше фрагмент кода, надеюсь, он вам поможет.Спасибо

...