Лучший подход для обработки связанных с представлением свойств в модели (извлекается из удаленного сервиса)

Question

Предполагается, что у меня есть интерфейс, например:

export interface Alert {
    alertId: string,
    alertMessage: string,
    timestamp: Date,
    alertType: number
}

Например, который отображается в компоненте;

app.component.ts:

alerts : Alert[];

ngOnInit(){
     this.alerts = this.getAlertsFromRemoteService();
}

getAlertsFromRemoteService() : Alert[] {
     //http get request...
}

updateAlertInRemoteService(alert : Alert) {
     //http post request...
}

app.component.html:

<tbody>
    <tr *ngFor="let alert in alerts">
         <td>
              <button (click)="updateAlertInRemoteService(alert)">
         </td>
    </tr>
</tbody>

Теперь я хочу изменить представление во время работы updateAlertInRemoteService (например, измените класс tr на disabled). Каков наилучший подход для этого?

Да, я могу, конечно, изменить интерфейс Alert на что-то вроде submitting: boolean, но таким образом я "вмешиваюсь" в целостность модели ...

Что бы вы сделали?

Спасибо

Answer 1

Вы можете хранить «отправляющие» логи c в отдельном массиве, который инициализируется при загрузке данных и переключается при обновлении данных.

alerts : Alert[];
submitting: boolean[];

ngOnInit() {
  this.service.getAlerts().subscribe(alerts => {
    this.submitting = alerts.map(() => false);
    this.alerts = alerts;
  });
}

updateAlertInRemoteService(index: number) {
  this.submitting[index] = true;
  const alert = this.alerts[index];

  // http post request...
  this.service.update(alert).subscribe(() => {
    this.submitting[index] = false;
  });
}

Тогда ваш HTML может работать с индексами и связываться с отправляющим массивом.

<tbody>
  <tr *ngFor="let alert of alerts; index as i" 
      [class.disabled]="submitting[i]">
    <td>
      <button (click)="updateAlertInRemoteService(i)">
    </td>
  </tr>
</tbody>

В качестве альтернативы вы можете сохранить подпись updateAlertInRemoteService, как она у вас есть, и найти индекс для отправленного alert.

Использование модели представления

Еще одним вариантом здесь будет использование модели представления.

export interface AlertViewModel {
  alert: Alert;
  submitting: boolean;
}

Вы должны создать их массив в своем компоненте и управлять состоянием отправки в посмотреть модель. Это дает преимущество в сохранении исходной модели в чистоте и исключает проблемы с вашими взглядами из моделей вашего домена.