Question

我尝试使用angular ngFor来解析这些数据：

链接：https://blockchain.info/rawaddr/3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku

我可以通过订阅来检索数据，但是当我尝试显示包含对象的属性时。我收到[object，Object]。

我目前正在尝试这个

<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 [＆＃39;输入＆＃39;]是否给了我一个未定义的

下面的新尝试。它离工作更近了，但尚未完全在那里。

<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

因为inputs和out是对象。您必须{{ t.inputs.fieldYouWant }}才能获得input对象的某个字段。

如果你想要整个input，你必须将它存储在你的组件中并对其进行ngFor。

我不确定你是否可以做这样的事情，但你可以尝试一下：

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

Answer 2

好吧，因为t.inputs和t.out是对象而不是字符串。如果您只想显示纯文本数据，那么您可以使用＆＃34; json＆＃34;过滤anuglarjs或使用＆＃34; JSON.stringify＆＃34;

将这些值转换为字符串

使用angularjs json过滤器 -

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

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

使用console.log进行简单测试，看看this.transactions [＆＃39;输入＆＃39;]是否给了我一个未定义的

快速解决方案 如果您在控制台中获取日期而不是未定义日期，那么获取数据的方法可能是错误的。 getTransactions()中的数据对象是未定义的类型。不是t.out，而是通过编写resp为变量t['out']赋值，在组件中提供完整的名称，例如['inputs']['0']['sequence']。而不是在component.html中使用resp

<强>解决方案

通过为json定义interface来投射结果数据，而不是使用.来访问值

Angular - 在json中显示Object中的对象

4 个答案: