Question

我有这些数据：

component.ts ：

protected $appends = ['data'];

public function getDataAttribute()
{
     if($this->attributes['type'] == 1) {
         return Inst::where('inst_column', $this->attributes['object_column_to_match']); //this just sample
     } else {
         return Report::where('inst_column', $this->attributes['object_column_to_match']); //this just sample
     }
}

我想在浏览ngFor中显示它，但我仍然得到[Object object]

我的HTML：

demo = [{
        'ob1': [{'ob1_first':'value11'}, {'ob1_second':'value12'}],
        'ob2': [{'ob2_first':'value21'}, {'ob2_second':'value22'}],
        }]

我的问题是：

如何在ngFor中引用Object数组对象？

Answer 1

您的json格式不正确。仍然解决方案如下，

 <div *ngFor="let key of demo">
       {{getValue(key) |json}} <br/>
  </div>

 getValue(key){
    console.log(key)
    return Object.values(key);
 }

<强> LIVE DEMO

Answer 2

demo是一个包含1个对象的数组。

* ngFor =“让演示密钥” - ＆gt;迭代通过对象，在你的情况下只有一个。

{
       'ob1': [{'ob1_first':'value11'}, {'ob1_second':'value12'}],
       'ob2': [{'ob2_first':'value21'}, {'ob2_second':'value22'}],
   }

这会让你获得第一把钥匙 - ＆gt; 演示[关键] .ob1 哪个有 [{'ob1_first'：'value11'}，{'ob1_second'：'value12'}] 作为价值。

要访问此内容。你必须这样做

*ngFor="let innerkey of key.ob1"

然后您可以使用innerkey.ob1_first

访问value1

Answer 3

对象不能直接使用* ngFor进行迭代。要迭代对象，您可以使用类似这样的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }

}

然后，您可以像这样使用它来迭代对象：

<div *ngFor="let item of demo | keys">
    {{demo[item]}}
</div>

Answer 4

使用您提供的格式。您可以使用以下代码打印演示对象

<div *ngFor="#itemArr of demo">
    <span >{{itemArr |json}}</span>
</div>

但是如果你想遍历你的json数据，那么你可能需要将其更正为

 this.demo =
  [
      [{'ob1_first':'value11'}, {'ob1_second':'value12'}],
      [{'ob2_first':'value21'}, {'ob2_second':'value22'}]
  ]

然后将其渲染为

                  <div *ngFor="#itemArr of demo">
                        <div *ngFor="#item of itemArr">
                            <span >{{item |json}}</span>
                        </div>
                       <hr>
                    </div>

如果答案仍然没有解决您的问题，您能否说明您要呈现的实际JSON对象。

Answer 5

$(document).ready(function () {
   $('select').on('change', function() {
   $('input[name=total_price]').text($(this).val() * 
   ($('input[name=no_needed]').val()));
  });
});

<div *ngFor="let key of demo"> {{key}} </div>中的所有内容都表示为demo，它是对每个单独对象的引用。

但似乎你的对象有点复杂key来处理。因此，请考虑使用*ngFor进行映射。

Demo.ts

Class

component.ts

export class Demo {
  ob1_first: string;
  ob1_second: string;
  ob2_first: string;
  ob2_second: string;
}

HTML

@Component({
  selector: 'my-component',
  ......
})
export class Component {
  demoArray: Demo[];

  ngOnInit() {
    // If this throw error you may need to replace with `demo: Demo = new Demo; 
    demo: Demo;
    demo.ob1_first = "value11";
    demo.ob1_second = "value12";
    demo.ob2_first = "value21";
    demo.obj2_secon = "value22";

    demo2: Demo;
    demo2.ob1_first = "value11";
    demo2.ob1_second = "value12";
    demo2.ob2_first = "value21";
    demo2.obj2_secon = "value22";
    this.demoArray.push(demo);
    this.demoArray.push(demo2);
  }
}

Angular 2 ngFor Object数组对象不起作用

5 个答案: