ngfor에서 ngfor angularfire2 angular5

나는 시작하기 전에, 나는 각도 및 angularfire (지속적 학습) 모두에 새로운 오전 것을 강조 할 필요가 -ngfor에서 ngfor angularfire2 angular5

가

내 중포 기지 데이터베이스는 다음과 같습니다

주문 세부 정보에 액세스하여 html로 바인딩 할 수 있지만 항목을 반복 가능한 배열로 변환하여 두 번째 ngfor를 사용할 수있는 방법을 완전히 알 수는 없습니다.

내 html 파일은 다음과 같은 :

 <ng-container *ngFor="let order of orders$ | async "> 
     <ng-container *ngFor="let item of order.Items"> 
     <ng-container *ngIf="order['Order Status'] == 0 "> 

     ... Display stuff using {{ item.Item }} {{ item.Quantity }}

.TS 파일에서 내 생성자는 보이는 뭔가 같은 : I는 여기로 다른 사람들의 질문과 답변 살펴 보았다

constructor(afDb: AngularFireDatabase) { 

    this.orders$ = afDb.list<any>('data/shop', ref => ref.orderByChild('ETA')).snapshotChanges().map(
    changes => { 
     return changes.map(
     c => ({ key: c.payload.key, ...c.payload.val() }) 
    ); 
    } 
); 
}

: AngularFire2 nested *ngFor Array within Array... but Firebase doesn't have arrays...?

하지만 이미 주문 키를 반환하기 위해 .map()을 사용하고 있기 때문에 솔루션이 어떻게 보이는지 실마리가 없습니다. 주문 상태를 업데이트하는 메소드의 입력으로 사용자 order.key가 있으므로이 작업을 그대로 유지해야합니다.

내가 여기에 붙여 넣은 .ts 코드 부분에 뭔가를해야한다는 것을 알고 있지만 어디서부터 시작해야할지 모르겠습니다.

복사 붙여 넣기 솔루션을 원하는만큼 제안 된 솔루션이 왜 효과가 있을지에 대한 설명을 매우 감사하게 생각합니다. 무엇보다 왜 그 이유를 배울 수 있습니까?

나는 해결책을 가지고 있지만, 가장 또는 가장 효율적인하지 않을 수 AngularFire 2.3.0과 5.0.0

출처

2017-11-16 Asim

각도를 사용하고 있습니다.

나는 내 .TS에 다음

generateArray(obj){ 
    return Object.keys(obj).map((key)=>{ return obj[key]}); 
    }

파일에 추가하고 내 .html 중에서의 order.Items의 항목을 변경 :

*ngFor="let item of generateArray(order.Items)"

출처

2017-11-16 20:26:00 Asim

ngfor에서 ngfor angularfire2 angular5

답변

관련 문제