如何使用 angular 模块中的接口和 observable 从 HTTP GET 请求的结果中使用 *ngFor 显示结果？

Question

我试图在 angular 应用程序中使用接口作为数据类型，但我不断收到错误消息。 我理解错误的含义，但我不知道如何解决它。

Error: Cannot find a differ supporting object '[{"id":1,"type":"Diagnostic"},{"id":2,"type":"Impact"}]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

HTML

<mat-form-field appearance="standard">
<mat-label>Select a report type</mat-label>
<mat-select placeholder ="Report Type" formControlName="reportType" required>
  <mat-option *ngFor="let report of reportTypes"  [value]=report>
    {{ report.type }}
  </mat-option>
</mat-select>

界面

export interface IReportTypes{
  id: number;
  type: string;
}

零件

export class HomeComponent implements OnInit {

  reportForm: any;

  reportTypes: Array<IReportTypes>;

  reportType: string;
  teamCode: string;
  orgName: string;

  constructor(private formBuilder: FormBuilder,
    private _el: ElementRef,
    private reportTypesService: ReportTypesService,
    private _bottomSheet: MatBottomSheet) {
  }

  ngOnInit(): void {

    this.createForm();

    this.getReportTypes();

  }


  getReportTypes() {

    this.reportTypesService.getReportTypes().subscribe(
      reportTypes => {
      this.reportTypes = reportTypes; console.log(typeof(reportTypes)), //<--- string
        error => console.log(error)});
    
  }

}

服务

 export class ReportTypesService {

  constructor(private http: HttpClient,
    private router: Router) { }


 
  // get report types available. This is returned from REST API provided by R
  getReportTypes(): Observable<IReportTypes[]> {

    return this.http.get<IReportTypes[]>('/api/v1/reportTypes');
   

  }

}

更新

我尝试了几种不同的变体（太多无法计数和提及），但这些都不能用于声明数组。 所以，我想看看服务返回的值是多少。 所以，我在组件中打印了以下内容

this.reportTypes = reportTypes; console.log(typeof(reportTypes)) this.reportTypes = reportTypes; console.log(typeof(reportTypes)) 。 结果是[ . 因此，似乎该服务实际上将结果作为string发送。

Answer 1

this.http.get<IReportTypes[]>实际上并没有将数据转换为IReportTypes数组，您只是在断言它是。

如果您从服务器获取作为字符串返回的数据（如果您使用的是最新版本并且响应显示它的 JSON，Angular 应该尝试在其上自动运行 JSON.parse），您将需要更好地在 map 中格式化您的数据function。

// get report types available. This is returned from REST API provided by R
  getReportTypes(): Observable<IReportTypes[]> {

    return this.http.get<IReportTypes[]>('/api/v1/reportTypes').pipe(
       // import map from rxjs/operators in your service
       map(response => {
         // depending on what response is, you will need to format it, possibly JSON.parse again
         console.log(typeof response, response);
         let reportTypes = JSON.parse(response);
         return reportTypes;
       });
    );
  }

您还可以从 Chrome 中签入网络选项卡，以查看来自服务器的原始响应以及标头。 如果它没有以 JSON 或额外的引号发送数据，那很可能它仍然是一个字符串。

Answer 2

更改报告类型：数组；

至

报告类型：数组<IReportTypes[]>；

或者

报告类型：数组<IReportTypes[]> = []；

试试这个 <mat-option *ngFor="let report of reportTypes | async" [value]=report>