Angular 使用 NgModel 的双向绑定不更新值

Question

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

当我使用以下实现时，当我更改 select 框时 {{orderId}} 正在更新，但 {{orderFilesApi}}（和 table 数据）未更新't.

你知道我做错了什么吗？

.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>

Answer 1

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

Answer 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

在更改事件中。

Angular 使用 NgModel 的双向绑定不更新值

Angular Two-Way binding using NgModel not updating value

angular

select

ngmodel