Отображение значения по умолчанию в mat-select без [(ngModel)] - PullRequest
Новая
       35

Отображение значения по умолчанию в mat-select без [(ngModel)]

0 голосов
/ 01 января 2019

У меня есть поле формы материала Angular, у которого есть выбор матов, который я пытаюсь установить в значение по умолчанию, которое уже есть в моей базе данных angularFire (FireStore).Важным выводом является то, что у меня есть наблюдаемые данные из базы данных, которые я пытаюсь вставить в выбор при загрузке страницы.Проблема в том, что мне нужно сделать что-то немного хакерское, чтобы заставить это работать (в настоящее время используется ngIf, чтобы я мог использовать «| async» на наблюдаемой).Причина, по которой я это делаю, заключается в том, что я не могу использовать синтаксис «| async» с [(ngModel)].

В основном мне нужно одно из следующего:

  1. Решение, что угловой материал позволяет получить мою ценность от моей наблюдаемой.

  2. решение о том, как получить эквивалент «| async» из моего шаблона и сделать то же самое в машинописи в компоненте (оттуда я могу использовать ngModel для привязки кзначение)

  3. какое-то другое решение, о котором я не думаю, пока оно не является хакерским

Ниже приведен рабочий код, которым я являюсьиспользование с * ngIf для отображения правильных данных по умолчанию:

Компонент: 

constructor(private db: AngularFirestore) {
  }
  ngOnInit() {
    this.food$ = this.db.doc('user/123/foods/321').valueChanges() as Observable<Food>;
}

Шаблон (работает, но с использованием взлома ngIf): 

  <mat-form-field *ngIf="(food$ | async)?.fiber as fiberValue">
    <mat-select placeholder="Fiber" (selectionChange)="fiberSelect($event.value)" [(ngModel)]="fiberValue">
      <mat-option [value]="0">Unkown</mat-option>
      <mat-option *ngFor="let fib of fiberOptions " [value]="fib">{{fib}}</mat-option>
    </mat-select>
  </mat-form-field>

Желаемыйшаблон (синтаксически неверный): 

  <mat-form-field>
    <mat-select placeholder="Fiber" (selectionChange)="fiberSelect($event.value)" [(ngModel)]="(food$|async)?.fiber">
      <mat-option [value]="0">Unkown</mat-option>
      <mat-option *ngFor="let fib of fiberOptions " [value]="fib">{{fib}}</mat-option>
    </mat-select>
  </mat-form-field>

1 Ответ

0 голосов
/ 01 января 2019

[(ngModel)] представляет собой комбинированную форму [ngModel] и (ngModelChange).Если вы разделяете их, это должно работать 

[ngModel]="(food$|async)?.fiber" (ngModelChange)="changeValue($event)"

и в changeValue

changeValue(val) {
    this.food$ = val;
}
...