如何加载包含来自 HTTP 内容的数据的列表？

Question

我有问题。我是 Angular 的新手，我尝试从后端 (c#) 加载数据并将其显示在前面。

在我的后端，我有一个模型列表，其中包含示例数据。

public static List<CheckModel> checkModels = new List<CheckModel>();

CheckModel 如下所示：

public string Id { get; set; }
public string Name { get; set; } 

现在我正试图在 Angular 中查看它。 如果我直接在我的 component.ts 中创建这样的列表：

ordersData = [
{ id: 100, name: 'order 1' },
{ id: 200, name: 'order 2' },
{ id: 300, name: 'order 3' },
{ id: 400, name: 'order 4' }
];

然后我可以在 html 表中查看它，一切都很好。 在表格的每一行我想添加复选框，所以我使用了这个方法：

private addCheckboxes() {
this.ordersData.forEach(() => this.ordersFormArray.push(new FormControl(false)));
}

我想从我的 API 加载数据。我试过这样：

constructor(
    private http: HttpClient,
    private formBuilder: FormBuilder
    ) {
  this.form = this.formBuilder.group({
    orders: new FormArray([])
  });
  this.addData();
  this.addCheckboxes();
}

private addData() {
    return this.http.get<CheckModel[]>('api/check/getData')
};

ordersData: CheckModel[];
  
private addCheckboxes() {
this.ordersData.forEach(() => this.ordersFormArray.push(new FormControl(false)));
}

但是这种情况是行不通的。 Chrome 中的开发者工具显示错误：

core.js:6014 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'forEach' of undefined
TypeError: Cannot read property 'forEach' of undefined

那么，如何将数据从我的 API 加载到 ordersData 列表？ 请原谅我的平庸问题！

Answer 1

您需要订阅才能在可用时获取该值。

  private addData() {
    return this.http.get<CheckModel[]>('api/check/getData').subscribe(
            (checkModelArray: CheckModel[]) => {
            this.ordersData = checkModelArray;
            this.addCheckboxes()
                         });
};

还要从构造函数中删除 this.addCheckboxes() ！！！它不能被构造函数触发，因为它需要的数据是未定义的。

订阅将在稍后返回，但构造函数将在 Angular 创建组件时初始运行。当构造函数执行时，构造函数需要的数据将不可用。所以你必须在订阅函数中强制你的逻辑。