0

我将数据打印到日志中。我是否只是将其放入数组中?所以我可以

   <ul *ngIf="courses$ | async as courses else noData">
                <li *ngFor="let course of courses">
                    {{course.name}}
                </li>
            </ul>
            <ng-template #noData>No Data Available</ng-template>




export class SurveyComponent {

surveys: Survey[];
survey: Survey;

constructor(private http: HttpClient) {

}

ngOnInit(): void {
    this.http.get('http://localhost:54653/api/survey/').subscribe(data => {
          console.log(data);
    },
        err => {
            console.log('Error occured.');
        }
    );
}

}

export class Survey {
constructor(id?: string, name?: string, description?: string) {
    this.id = id;
    this.name = name;
    this.description = description;
}

public id: string;
public name: string;
public description: string;

}

剪断

编辑 1:为什么第一个 .map 有效而另一个无效?

在此处输入图像描述

4

2 回答 2

1

map您可以在 API 调用后使用 rxjs运算符:

...
courses$: Observable<Survey[]>
...
ngOnInit(): void {
  // if you want use the async pipe in the view, assign the observable
  // to your property and remove .subscribe

  this.courses$ = this.http
     .get('http://localhost:54653/api/survey/')
     .map(surveys => 
        surveys.map(survey => new Survey(survey.id, survey.name, survey.description))
     )
}
...
于 2017-12-11T14:49:33.513 回答
1

像这样 ?

surveys$: Observable<Survey[]>;

ngOnInit(): void {
  this.surveys$ = this.http.get<Survey[]>('http://localhost:54653/api/survey/');
}
于 2017-12-11T14:50:04.787 回答