각도 5 - 채우기 옵션 매트를 사용하여 대상 선택? NgFor가 아닌가요?

Question

NgFor는 배열을 반복하여 드롭 다운 또는 목록을 채 웁니다. 그러나 Observables는 이미 "반복"된 데이터 스트림을 내 케이스 개체에 제공합니다. 왜 루프? 그냥 옵션을 만드는 일을 시작하십시오.

{skill_id: 8, skill_name: "Whatever"} 
{skill_id: 9, skill_name: "Something"} 

NgFor를 대체해야하는 멋진 객체 스트림이있을 때 배열을 필요로하지 않는 것 같습니다. 나는 이런 식으로 뭔가를 생각하고 개체가 관찰로부터 수신 될 때 새로운 옵션 만드는거야 :

<mat-select placeholder="Select one"> 
    <mat-option (click)="loadIdValueInForm(skill_id)" 
        [value]="skill_name">{{skill_name}} 
    </mat-option> 
</mat-select> 

개체의 배열에서 다양한 방법으로이 작업을 수행 이전 게시물의 다양한있다, 그러나 그것은 것 Observable 설정의 결과로 더 잘 수행하면됩니다. 어떤 아이디어? 이것에 대해 창조적 인 사람? 당신이 관찰을 반복하려면

private getListData(dbTable) { 
    this.skills$ = this.httpService.getDropDownList(dbTable) 
     .map(data => data.resource) 
     .switchMap(data => data) 

Answer 1

, 당신은에 대한 async 파이프를 사용할 수 있습니다.

<mat-option (click)="loadIdValueInForm(skill_id)" 
        *ngFor="let skill of skills$ | async" 
        [value]="skill.skill_name">{{skill_name}} 
    </mat-option> 

그런 다음 당신은 당신의 코드에서 다음과 같은 부분을 제거 할 수 있습니다 :

.map(data => data.resource)