1. 技术文章
  2. error display in *ngfor json array object

error display in *ngfor json array object

由 自闭症网瘾萝莉.ら 提交于 2019-12-01 02:22:42
Thierry Templier

I think that the value you set in the indexes property isn't an array but an object.

I would see several reasons for this:

  • You receive the response instead of the payload from the getIndexes method. In this case, you could use the map operator in this method:

    getIndexes() {
  return this.http.get(...).map(res => res.json());
}

  • The received payload doesn't correspond to an array but some of its properties. In this case, you need to set this property into the indexes property.

If you want to iterate over the properties of an object, you need to implement a custom filter like this:

@Pipe({name: 'keyValues'})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]);
    }
    return keys;
  }
}

and use it like that:

<div class="div_IndxPartition" *ngFor="#indObj of indexes | keyValues">
  (...)
</div>

See this question:

You should try this:

In html:

<div  *ngFor="let subsciption of subscriptions;">
                     <div class="col-md-6">
                        <h5 class="widget-title">{{subsciption.name}}</h5>
                    </div>
</div>

in .ts file:

    export class SubscriptionComponent implements OnInit {
        private subscriptions: any =[]; 
        // private subscriptions: any ={};    // here dont use {}
    .
    .
    .
    .
    .

        getAllSubscriptions(queryString) {
            this._http.get(`${environment.base_url}/subscriptions` + queryString)
                .subscribe((response: Response) => {
                    this.subscriptions = response.json();
                },

                (error: Response) => {
                    console.log("Login error");
                });
        }
        this.getAllSubscriptions(query);

    }

I had same problem and my solution was without Pipes. I did not use variable in the template that returns Observer, create intermediate variable and assign result to it. For example, we will save stream to this.sub but result will save to this.indexes on success callback and will use this variable in the html template. 

@Component({
  template: `
<ul>
  <li *ngFor="let index of indexs">
    {{ index }}
  </li>
</ul>
`
})
export class HomeComponent {
  privat sub;
  public indexes:Array<Index>=[];
  public error;

  constructor(private _service: HomeService) {
    this.sub = this._service.getIndexes().subscribe(
        data => this.indexes =  JSON.parse(data),
        error => alert(" Error is : " + error),
        () => console.log("finished")
     );

  }
}

You don't want to use pipes when working with Observables. This error is very generic and the best way is to throw in a console.log() and see where you are going wrong as it could be numerous things.

My problem was my Array was inside the Object, and I was trying to loop over the Object. Other problems could include the mapping or the ngFor. My console output would look something like this:

this.indexes = _service.getIndexes()
         .subscribe(
            data => {
                this.indexes = JSON.parse(data);
                console.log(indexes);
            },
            error => alert(" Error is : " + error),
                ()=> console.log("finished")
         );
    console.log(this.indexes);

So the fix I needed was something like this:

this.indexes = _service.getIndexes()
             .subscribe(
                data => {
                    this.myNewObject = JSON.parse(data);
                    this.indexes = this.myNewObject.indexes;
                },
                error => alert(" Error is : " + error),
                    ()=> console.log("finished")
             );
        console.log(this.indexes);

This was because the array was nested inside the Object, so I just created a new object and accessed the array by getting its property.

i see your answer, and the easy way to solve is just set the type of the object in the *ngFor to array like this:

public indexes:Array<TYPE_OF_YOUR_DATA>=[];
标签
json
angular
ngfor
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!