当mat-options列表更改时，Angular 5 Material Update mat-select

Question

在我的Angular 5应用程序中，我有一个输入框，当按下enter键时，它会调用一个返回数组的API。然后在mat-select中使用此数组来填充mat-options。第一项是自动选择的，但显示值永远不会更新。

换句话说，当使用动态数据填充mat-select时，对其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 docs的一个例子：

因此，您应该使用page.vue代替常规public Map<String, Double> getValueForActivity() { return this.allActiv.values() .stream() .collect(Collectors.toMap(Activity::getName, this::sumExpenses)); } private double sumExpenses(Activity activity) { return this.expenses.values() .stream() .filter(e -> this.userId.equals(e.getCustomerId())) .filter(e -> e.getActivity().equals(activity)) .mapToDouble(Expense::getExpenseValue) .sum(); } ，如下所示：

git clean -dffx && git reset --hard