时间戳

首页 > 解决方案 > 处理模型中与视图相关的属性的最佳方法（从远程服务获取）

angular - 处理模型中与视图相关的属性的最佳方法（从远程服务获取）

问题描述

假设我有一个接口，例如：

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，但那样我就“干扰”了模型的完整性......

你会怎么做？

谢谢

标签： angular

解决方案

您可以将“提交”逻辑存储在单独的数组中，该数组在加载数据时初始化，并在更新数据时切换。

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;
}

您将在组件中创建一个数组并在视图模型中管理提交状态。这有利于保持您的原始模型干净，并使您的视图问题远离您的域模型。

推荐阅读