Angular - отображение объекта внутри объекта в формате json

Question

Я пытаюсь использовать угловой ngFor для разбора этих данных:

Ссылка: https://blockchain.info/rawaddr/3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku

Я могу нормально получать данные, подписавшись на них, но когда я пытаюсь отобразить атрибуты, в которых есть объект. Я получаю [объект, объект].

Как я сейчас пытаюсь это сделать

<div *ngFor="let t of transactions" >
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title></mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">From</th>
            <th scope="col">To</th>
            <th scope="col">Receiver</th>
            <th scope="col">Hash</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{t.inputs}}</td>
            <td>-></td>
            <td>{{t.out}}</td>
            <td></td>
          </tr>
        </tbody>
      </table>

component.ts

export class InputComponent implements OnInit {

  address = "3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku";
  transactions: any ;
  inputs: any;
  public arrayOfKeys
  constructor(private blockchain: BlockchainService) { }

  ngOnInit() {
  }

  submit(){
    console.log(this.address)
  }

  getTransactions(){
    this.blockchain.getTransactions().subscribe((data) => {
      this.transactions = data["txs"]
      console.log(this.transactions)
      console.log(this.transactions['inputs'])

    });
  }
}

Простой тест с console.log, чтобы увидеть, дает ли this.transactions ['input'] неопределенное значение

Новая попытка ниже. Это ближе к работе, но еще не полностью там.

<div *ngFor="let t of transactions">
    <div *ngFor="let field of t.inputs ; let i = index">
        <p>{{ field.sequence }}</p>
        <p>{{ field.witness}}</p>
        {{i}}
        {{field.prev_out[i].addr}}
        <hr>
        <div *ngFor="let out of field.prev_out">
          {{out.addr}}
          </div> 
    </div>
</div>

Ошибка, которую он мне дает

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

Простой тест с console.log, чтобы увидеть, дает ли this.transactions ['input'] неопределенное значение

Быстрое решение если вы получаете дату в консоли вместо undefinedчем подход получения данных может быть неправильным.Объект данных в getTransactions() имеет неопределенный тип.Вместо t.out присвойте значение переменной resp, написав t['out'], указав полное имя, например, ['inputs']['0']['sequence'] в своем компоненте.Чем использовать resp в component.html

Решение

Привести данные результата путем определения interface для json и затем использовать . для доступа к значениям

Answer 2

Ну, потому что t.inputs и t.out являются объектами, а не строкой. Если вы хотите просто показать данные в виде простого текста, вы можете использовать фильтр jug для anuglarjs или преобразовать эти значения в строку, используя "JSON.stringify"

Использование json-фильтра angularjs -

<code><pre>{{ {'name':'value'} | json }}

Answer 3

t.inputs не является объектом, это массив объектов. Поэтому я думаю, что это должно сработать.

<div *ngFor="let t of transactions">
<div *ngFor="let field of t.inputs ; let i = index">
    <p>{{ field.sequence }}</p>
    <p>{{ field.witness}}</p>
    {{i}}
    <hr>
    {{field.prev_outt.addr}}
</div>
</div>

Answer 4

Потому что inputs и out являются объектами.Вам нужно было бы сделать {{ t.inputs.fieldYouWant }}, чтобы получить определенное поле объекта input.

Если вы хотите получить целое input, вам нужно будет сохранить его в своем компоненте и выполнить ngFor наэто.

Я не уверен, что вы можете сделать что-то подобное, но вы можете попробовать это:

<div *ngFor="let t of transactions">
     <div *ngFor="let field of t.inputs">
         {{ field }}
     </div>
</div>