Question

我正在调用mat-dialog，后者调用角度服务以获取要绑定到UI的数据。我有如下界面

<button onclick="reset()">Reset</button>

<table id="StickyHighlight">
  <thead>
    <tr>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Thing 1</td>
      <td>Thing 2</td>
      <td>Thing 3</td>
    </tr>
    <tr>
      <td>Thing 1</td>
      <td>Thing 2</td>
      <td>Thing 3</td>
    </tr>
    <tr>
      <td>Thing 1</td>
      <td>Thing 2</td>
      <td>Thing 3</td>
    </tr>
  </tbody>
</table>

我在构造函数中添加了服务调用，并在ngOnInit中进行了测试

export interface ViewModel {
  computations: ComputationData;
  explanation: Explanation;
  comments: string;
  requireMoreInformation: boolean;
}

当我弹出mat-dialog弹出窗口时，我按下 F12 ，发现我用来绑定到UI的许多对象都收到了这种消息

无法读取未定义的属性“标题”

我开始将以下内容添加到构造函数中，有许多实例化

Constructor(private myService: MyService) {
  this.myService.getData().subscribe(data => {
    if (data) {
      this.viewModelData = data;
      this.loadData();
    }
  }
}

在常规组件中，无需初始化属性。我只需要实例化对象为this.viewModelData = [];从服务获取数据时，我将设置所有值并绑定到UI。

我放置了一些断点，并注意到在数据从服务返回之前，UI绑定已被调用。

获取数据后，是否可以绑定到UI？

Answer 1

您可以将视图模型数据公开为可观察的并使用异步管道，但这可能很复杂。

您还可以使用ngIf隐藏该对话框的内容，无论viewModelData是null还是undefined，都可以对其进行门控。您甚至可以在未加载viewModelData时显示微调框。

这些是让您想到的方法，但是您所描述的是很正常的。您提到到目前为止您已经能够摆脱它，但同时也提到...

this.viewModelData = [];

如果您的数据是一个数组，则您的视图中可能有一个ngFor，它仅包含零个元素。这与包裹*ngIf的作用相同。在初始化视图模型之前，实际上没有任何视图元素试图获取视图模型数据。

Answer 2

即使您在自己的测试中没有看到性能问题，在异步环境中，也无法始终预测何时可能延迟数据。

通常，我通过检查对象是否使用ngIf来定义所有显示。如果未定义，我将显示一个组件，该组件显示某种类型的加载消息或动画图形（或两者）。

另一种选择是在加载对话框之前获取数据，但是即使在这种情况下，也可能必须显示某种类型的加载消息。

角材料垫对话无法

2 个答案: