angular - 预选和更新角材料选择列表

Question

我是一个使用 Angular Material 的带有选择列表（每个列表项的复选框）的组件。我不知道如何在显示列表之前设置复选框，然后在用户交互后获取所选项目....即，如果用户先前选择了这些项目，并且一旦他们选择了这些项目，我希望它们被预先选择更新他们的选择我想保持更新，所以一旦他们刷新他们就有预先选择的值。这是设置： https ://stackblitz.com/edit/material-selection-list-5-0-0?file=app%2Fapp.component.ts 如何保持我更新的选择并将它们显示为预选?

标签： angularangular-material2

Answer 1

如果您已经从数据库中获取信息，则可以更新您的selectedOptions阵列。

如果这是您从服务器获得的：

this.yourDataFromServer = { "taskTypeAreas": [ { "name": "Area1" }, { "name": "Area2" } ] };

您可以使用区域字符串创建一个新数组：

this.selectedOptions = this.yourDataFromServer.taskTypeAreas.map((area) => area.name);

它应该可以工作，因为您已经selectedOptions将 mat 列表的 as ngModel 定义为。