在HTML

Question

我在console.log中的数据输出：

{TotalPendingResponseCount: 0, TotalRequestSendCount: 1, TotalRequestReceivedCount: 1, TotalRequestRejectCount: 3}

要捕获这些信息，我将其保存在数组中：

userData : arrayResponseCount[];
To get the result:
this.dataservice.getData(Url).
    subscribe((res: any) => 
    { this.userData = res });
  }

我的arrayResponseCount类是：

class arrayResponseCount {
  constructor(public TotalRequestSendCount: string, public TotalPendingResponseCount: string,
              public TotalRequestRejectCount: string, public TotalRequestReceivedCount: string
  ){}
}

现在我需要在HTML中绑定值。为此，我使用的是syntex

{{userData.TotalRequestSendCount}}

但它抛出了异常，即错误类型错误：无法读取属性＆＃39; TotalRequestSendCount＆＃39;未定义的。

你对此有什么想法吗？

Answer 1

由于您是从异步请求中获取数据，因此可能会有延迟，您可以使用安全导航操作符 ? 处理，

{{userData?.TotalRequestSendCount}}

Answer 2

当Angular首先评估你的绑定{{userData.TotalRequestSendCount}}时，userData还没有值。

改为使用

{{userData?.TotalRequestSendCount}}

告诉Angular它不应该尝试访问TotalRequestSendCount而userData为空（它被称为安全导航运算符）