Угловая двусторонняя привязка с использованием NgModel без обновления значения

Question

Я пытаюсь реализовать поле выбора в Angular, чтобы иметь возможность переключаться между заказами. У меня также есть общая таблица, которая принимает API URL, чтобы получить этот конкретный заказ. URL-адрес API строится вместе в файле TS и содержит orderId который я пытаюсь связать с помощью [(ngModel)], Когда я переключаюсь между 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>

Answer 1

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

1. Если

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

   в разных HTML

   нравится

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

   в событии изменения.

2. Если

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

   в том же HTML

   измените выходное свойство на обычное, например @output() orderFilesApi, на простое свойство и установите

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

   в событии изменения.

Answer 2

Вы можете написать функцию для свойства onSelectionChange из MatSelect, чтобы обновить оба ваших значения (orderId и orderFilesApi)