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

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

0 голосов
/ 11 января 2019

Я пытаюсь реализовать поле выбора в 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>

Ответы [ 2 ]

0 голосов
/ 11 января 2019

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

  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

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

0 голосов
/ 11 января 2019

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

...