在Angular2 / 4/5中，如何将数据绑定到FrontView如果它像数组一样 [英] In Angular2/4/5, How to bind the Data to FrontView If it is coming like an array

问题描述

我需要在home.html的UserName和Email前面获取数据。但现在我的情况如下：
我在控制台中获取数据如下图所示

可能是错误/如何使用Angular将这些类型的数据绑定在HTML中..
现在 home.html 低于...评论/非评论代码，两者都有不工作

I need to get data in front of UserName and Email of home.html. But Now I'm getting like below I'm getting data in console as the below image What may be the error/ How to bind these type of data in HTML with Angular.. Now home.html is below..Commented/non commented code, both are not working

 <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页面中展示 ..任何人都可以帮助我..谢谢提前

I need to know , if the data is coming as array like in above image, how to present it in HTML page..Can anyone help me out..Thanks In Advance

我的注册组件我正在调用app-data.service并导航到home组件是
register.ts

My register component from which I'm calling app-data.service and navigating to home component is 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;
   });
  }

推荐答案

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

An Observable is cold, meaning that you have to subscribe on it to get it called and have a value. map operator is used to parse your response in the desired format and it returns an observable which shall be subscribed.

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
调用方法并订阅它以获取值。

I assume you have injected your service in home.ts invoke the method and subscribe it to get the value.

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

这篇关于在Angular2 / 4/5中，如何将数据绑定到FrontView如果它像数组一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！