Question

我有一个服务从api获取身份，如下所示。

getUserClaims() {
 return this.http.get(this.rootUrl+'/api/GetUserClaims');
}

在我的home.component.ts中，我按如下方式调用它。

userClaims: any;
ngOnInit() {
  this.userService.getUserClaims().subscribe((data: any) => {
    this.userClaims = data; 
  });
}

我在userClaims的输入元素中使用home.component.html，如下所示：

<div class="col s12 m8 l9" >
  <ul class="collapsible collapsible-accordion" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active ">User Detail</div>
      <div class="collapsible-body">
          <div class="card ">
              <br>
                <div class="card-image" *ngIf="base64textString != null">
                  <img [src]="'data:image/jpg;base64,'+base64textString" style="padding-left: 20px; border-radius: 50%; width: 25%; height: 25%"/>
                </div>
              <div class="card-content">
                <table>
                  <tbody>
                    <tr>
                      <td><span style="font-weight:bold;">UserId </span></td>
                      <td>
                        <div class="input-field">
                            <input [disabled]="disabledInput" value="{{userClaims.UserId}}" type="text" class="validate">
                        </div>
                      </td>  
                    </tr>
                    <tr>
                      <td><span style="font-weight:bold;">Username </span></td>
                      <td>
                        <div class="input-field">
                            <input [disabled]="disabledInput" value="{{userClaims.UserName}}" type="text" class="validate">
                        </div>
                        </td>
                    </tr> .........

当我登录时，出现以下错误：

错误类型错误：无法读取属性＆＃39; UserId＆＃39;未定义的

我的输入没有显示。但是当我刷新时，那是我的输入元素被填充的时间，但错误仍然存在于devconsole中。

这方面的任何指示都将受到赞赏。

Answer 1

您应该使用safe navigation operator ( ?. ) and null property paths ?

{{userClaims?.UserId}} // {{userClaims?.your_property}}

当您尝试在可用之前访问该属性时，

另一种方法是使用*ngIf检查变量是否不是null并且具有值

<div *ngIf='userClaims'>
   // Put your all code within this block
</div>

Answer 2

之所以发生这种情况，是因为您收到的数据“太晚了”。

Angular尝试在服务实际返回数据之前呈现{{userClaims.UserId}}。

您可以使用*ngIf="userClaims"将输入包装在div中，也可以使用安全导航操作符：

{{userClaims?.UserId}}

即使填充输入字段，也无法读取未定义角度2的属性

2 个答案: