使用 NgModel 的角度双向绑定不更新值答案

【问题标题】：Angular Two-Way binding using NgModel not updating value使用 NgModel 的角度双向绑定不更新值
【发布时间】：2019-01-11 10:45:25
【问题描述】：

我正在尝试在 Angular 中实现一个选择框，以便能够在订单之间切换。我还有一个通用表，它需要一个 api Url 来获取该特定订单。 api url 一起构建在 ts 文件中，并包含我尝试使用[(ngModel)] 绑定的orderId。当我使用选择框在orderIds 之间切换时，我希望更新表格。

当我使用以下实现时，{{orderId}} 在我更改选择框时会更新，但{{orderFilesApi}}（和表格数据）不会。

你知道我做错了什么吗？

.ts文件：

@Input() orderId = '123';
@Output() orderFilesApi = this.serverUrl + '?' + 'orderid=' + this.orderId;

orders: Orders[] = [
   {value: '123', viewValue: 'ORDER1'},
   {value: '456', viewValue: 'ORDER2'}
];

.html文件：

<mat-form-field>
  <mat-select placeholder="Change Order" [(ngModel)]="orderId">
    <mat-option *ngFor="let order of orders" [value]="order.value">
      {{order.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<div>{{orderId}}</div>
<div>{{orderFilesApi}}</div>

<app-data-table
  [apiUrl]="orderFilesApi"
  [displayedColumns]="['name', 'type']">
</app-data-table>

【问题讨论】：

你能用示例数据创建 stackblitz 吗？
orderFilesApi 不应该是值数据类型，因为你用 @Output() 装饰它，它应该是 EventEmitter

标签： angular select ngmodel

【解决方案1】：

您可以在 MatSelect 的 onSelectionChange 属性上编写一个函数来更新您的值（orderId 和 orderFilesApi）

【讨论】：

谢谢，现在 {{orderId}} 和 {{orderFilesApi}} 正在 .html 文件中更新，但表格仍未重新加载正确的值。 “orderFilesApi”是服务通过http调用获取数据的url。

【解决方案2】：

查看您发布的代码可能有两个原因：

如果

<app-data-table [apiUrl]="orderFilesApi" [displayedColumns]="['name', 'type']"> </app-data-table>

在不同的html中

喜欢

this.orderFilesApi.emit(this.serverUrl + '?' + 'orderid=' + this.orderId);

在更改事件中。
如果

<app-data-table [apiUrl]="orderFilesApi" [displayedColumns]="['name', 'type']"> </app-data-table>

在同一个html中

将输出属性更改为普通属性，如@output() orderFilesApi 为简单属性并设置

this.orderFilesApi = this.serverUrl + '?' + 'orderid=' + this.orderId

在更改事件中。

【讨论】：

谢谢，我删除了@Output 参数，我想这里不需要它。 {{orderFilesApi}} 现在正在更新，但表格没有。也许我需要以某种方式刷新页面？
现在在 app-data-table 组件中，您必须进行服务调用或调用正在进行服务调用的方法。在 ngOnChanges 方法中执行此操作。