Angular 5 Material Update mat-select при изменении списка параметров коврика

Question

В моем приложении Angular 5 у меня есть поле ввода, которое при нажатии Enter вызывает API, который возвращает массив.Этот массив затем используется в mat-select для заполнения опций mat.Первый элемент выбирается автоматически, но отображаемое значение никогда не обновляется.

Другими словами, когда выбор циновки заполняется динамическими данными, назначение его ngModel не отражается в отображаемом значении.

component.html:

<mat-form-field>
    <input matInput placeholder="Order ID" [(ngModel)]="orderID (keydown)="handleKeyDown($event)">
</mat-form-field>

<mat-form-field>
    <mat-select placeholder="Product ID"  (change)="showProductDetails(productID)" [(ngModel)]="productID" >
        <mat-option *ngFor="let product of products" [value]="product.id"> {{ product.name }} </mat-option>
    </mat-select>
</mat-form-field>

component.ts:

orderID = '';
products = [];

handleKeyDown(event: any) {
  if (event.keyCode === 13) { this.getProductIDs(); }
}

getProductIDs(){

    ... /~ Call API and populate "products"  ~~/

    // Update the mat-select's ngModel - value is updated but display is not
    productID = products[0].id;
}

showProductDetails(productID){ /~~ Do some stuff }

Answer 1

Пример из документации Angular Material:

Таким образом, вы должны использовать [(value)] вместо обычного [(ngModel)], например:

<mat-form-field>
    <mat-select placeholder="Product ID"  (change)="showProductDetails(productID)" [(value)]="productID" >
        <mat-option *ngFor="let product of products" [value]="product.id"> {{ product.name }} </mat-option>
    </mat-select>
</mat-form-field>