как получить доступ к отдельным файлам от полезной нагрузки в angular 8

Question

Как получить доступ к отдельным полям из полезной нагрузки и привязать к 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>

Answer 1

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;