时间戳

首页 > 解决方案 > 如何在角度 8 中从有效负载中访问单独的字段

angular - 如何在角度 8 中从有效负载中访问单独的字段

问题描述

如何从有效负载访问单独的字段并与页面中的 HTML 绑定。我想获取 angular 8 中的字母代码和国家/地区名称。
这是我的组件：

this.table$ =  this.productService.get(id)
   .map(actions => {
   
     const id = actions.payload.key;
     const data = actions.payload.val();

    return{id, data};
   
  })
   .subscribe(res =>{

    this.table$ = JSON.stringify(res)

     
  console.log("Value from Firebase "+this.table$)  
   
  return this.table$;
})

我在控制台中获得输出，但我想将数据与 HTML 页面分开绑定

{"id":"-MBMklQEALG_eIP2qF1T","data":{"alphacode":"200","countryname":"America","currencyname":"Dollar","numericcode":9111}}

我想将数据与字段绑定[(ngModel)]

<form #f="ngForm" (ngSubmit)="save(f.value)">
    
    <div class="form-group">
        <label for="countryname">Country Name</label>
        <input #countryname="ngModel" [(ngModel)]="table$.countryname" name="countryname" id="countryname" type="text" class="form-control" required >
        <div class="alert alert-danger" *ngIf="countryname.touched && countryname.invalid">
            Country Name is required..!
        </div>
    </div>
    
    <div class="form-group">
        <label for="currencyname">Currency Name</label>
        <input #currencyname="ngModel" [(ngModel)]="table$.currencyname"  name="currencyname" id="currencyname" type="text" class="form-control" required >
        <div class="alert alert-danger" *ngIf="currencyname.touched && currencyname.invalid">
            Currency Name is  Required
        </div>
    </div>
    
    <div class="form-group">
        <label for="alphacode">Alpha Code</label>
        <input #alphacode="ngModel" ngModel  name="alphacode" id="alphacode" type="text" class="form-control" required  >
        <div class="alert alert-danger" *ngIf="alphacode.touched && alphacode.invalid">
            Alpha Code is required..!
        </div>
    </div>

    <div class="form-group">
        <label for="numericcode">Numeric Code</label>
        <div class="input-group">
        <span class="input-group-text">$</span>
        <input #numericcode="ngModel"  ngModel name="numericcode" id="numericcode" type="number" class="form-control" required>
    </div>
    <div class="alert alert-danger" *ngIf="numericcode.touched && numericcode.invalid">Price Required</div>
    </div>

    <div class="form-group">

    <mat-radio-group aria-label="Select an option">
        <mat-radio-button value="1">Active</mat-radio-button>
        <mat-radio-button value="2">In-Active</mat-radio-button>
      </mat-radio-group>
    </div>
      

    <button class="btn btn-primary">Save</button>

</form>

标签： angular

解决方案

const data = {
  "type": "value",
  "payload": {
    "alphacode": "200",
    "countryname": "America",
    "currencyname": "Dollar",
    "numericcode": 9111
  }, "key": "-MBMklQEALG_eIP2qF1T"
}

const alphacode = data.payload.alphacode;
const countryname = data.payload.alphacode;

推荐阅读