在Angular2 / 4/5中，如何将数据绑定到FrontView如果它像数组一样

Question

我需要在home.html的UserName和Email前面获取数据。但现在我在以下了 我在控制台中获取数据如下图所示 可能是错误/如何使用Angular绑定HTML中的这些类型的数据.. 现在 home.html 低于......评论/非评论代码，两者都无效

 <div class="row" *ngIf="userClaims">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-content">
        <span>Username :{{userClaims.Name}}</span>
        <br>
        <span>Email : {{userClaims}}</span>
        <br>
        <!-- <div *ngFor="let order of userClaims" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
          OrderNumber : {{ order.Id }} <br>
          P_O_Number : {{ order.Address }} <br>
        </div> -->
      </div>
    </div>
  </div>
</div>

home.ts

ngOnInit() {
    this.resetForm();
    this.userClaims= this.userService.userClaims;
  }

以下是服务代码 app-data.service.ts

sendMobileNo(mobno) {
        var data = "MobileNo=" + mobno;
        var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json'});
       var url=this.uihelper.CallWebAPIUrlNew("/Tenant/GetTenantsByMobile")+"?"+data;
        return this.http.get(url).map((response: Response) => {
           var data = response.json();
             //this.userClaims = response.json();
             //this.userClaims(data);
           this.userClaims=data;
        });
}

我需要知道，如果数据像上面的图像一样呈现，如何在HTML页面中显示 ..任何人都可以帮助我...谢谢提前

我的注册组件，我从中调用app-data.service并导航到home组件 的 register.ts

    OnSubmit(mobno){
    this.regService.sendMobileNo(mobno).subscribe((data : any)=>{
      //this.userClaims = data;
      this.navCtrl.push(HomePage,{data});
      //this.navCtrl.push(HomePage);
    },
   (err : HttpErrorResponse)=>{
     this.isLoginError = true;
   });
  }

Answer 1

如果你只有一个值（并且你知道它总是那个值），你可以使用

var data = response.json();
if(data && data.length == 1) {
    this.userClaim = data[0];
}

但在这种情况下，我会建议您修改后端，只返回一个对象而不是数组。

如果阵列中有未知数量的数据，请使用循环

<div class="row" *ngIf="userClaims">
    <div *ngFor="let order of userClaims" class="col s12 m7">
        <div class="card">
            <div class="card-content">
                <span>Username :{{order.Name}}</span>
                <br>
                <span>Email : {{order.Email}}</span>
            </div>
        </div>
    </div>
</div>

刚刚在这里写了这个片段，所以我无法保证它完全准确。

Answer 2

Observable很冷，这意味着您必须订阅才能调用它并拥有值。  map运算符用于以所需格式解析您的响应，并返回一个可以订阅的observable。

sendMobileNo(mobno) {
        var data = "MobileNo=" + mobno;
        var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json'});
       var url=this.uihelper.CallWebAPIUrlNew("/Tenant/GetTenantsByMobile")+"?"+data;
        return this.http.get(url).map((response: Response) =>response.json());


}

我假设你已经在home.ts注入了你的服务 调用该方法并订阅它以获取值。

onSubmit(mobno:any){
    this.userService.sendMobileNo(mobno).subscribe(response=>{
       this.userClaims= response});
}