개체를 배열로 변환하는 유형 스크립트 - *ngFor는 개체 반복을 지원하지 않기 때문입니다.

개체를 배열로 변환하는 유형 스크립트 - *ngFor는 개체 반복을 지원하지 않기 때문입니다.

• 루프를 사용하여 개체를 이렇게 어레이로 변환하고 싶지 않습니다!프로세스를 두 배로 늘리고 앱의 성능을 늦추면 (Ionic2와 Typescript, Firebase 포함)

  (데이터에 키 입력) {array.value(값); }에 대해

*ngFor를 사용하여 객체 자체(첨부된 사진에 표시)를 반복할 수 있는 솔루션이 있습니까?

또는 이 개체(첨부된 사진에 표시됨)를 배열로 변환하여 *ngFor에서 읽을 수 있도록 할 수 있습니다.

Object.keys(obj)를 사용하여 명명된 인덱스를 가져올 수 있습니다.추가로 사용하거나 사용자 지정할 수 있는 배열 구조가 반환됩니다.객체 값을 반복하기 위한 샘플 사용은 다음과 같습니다.

var persons = { 
    john: { age: 23, year:2010},
    jack: { age: 22, year:2011},
    jenny: { age: 21, year:2012}
}

반복기 가져오기

var resultArray = Object.keys(persons).map(function(personNamedIndex){
    let person = persons[personNamedIndex];
    // do something with person
    return person;
});

// you have resultArray having iterated objects 

Angular 6부터는 키 값 파이프 연산자가 있습니다.다음 작업을 간단히 수행합니다.

*ngFor="let item of objectList | keyvalue"

item.key # refers to the keys (134, 135...) in your example
item.value # refers to the object for each key

인덱스가 필요하지 않으면 Object.values(사용자의 Object)를 사용하여 내부 개체의 배열을 가져올 수 있습니다.

스타다드 라이브러리 기능Object.entries당신을 위해 그렇게 해주세요.문서화

다음은 사용 예입니다.Object.entries(키 -> A형 객체)의 객체를 속성을 가진 A형 객체 목록으로 변환하는 함수에서name그리고 그 가치로서의 열쇠.name속성:

function f<A>(input: { [s: string]: A }): (A & {name: string})[] {
  return Object.entries(input)
    .map(a => {
      return {name: a[0], ...a[1]}
    })
}

반응 데이터를 대괄호 안에 넣고 클래스에 저장하기만 하면 됩니다.

this.servicename.get_or_post().subscribe(data=>
   this.objectList = [data]);

파이프의 Array()에 추가하는 것이 저에게 효과가 있었습니다.

// Import toArray function
import { toArray } from 'rxjs/operators';

// Generic function to consume API
searchObjects(term: string): Observable<theObject[]> {
  requestUrl = this.url + term;
  return this.http.get<theObject[]>(requestUrl, httpOptions).pipe(
      // convert object to array
      toArray<theObject>()
  );
}

언급URL : https://stackoverflow.com/questions/41458400/typescript-convert-object-to-array-because-ngfor-does-not-supports-iteration