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

Question

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

Answer 1

如果您已经从数据库中获取了信息，则只需更新selectedOptions数组即可。

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

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

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

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

由于您已经将selectedOptions定义为Mat列表的ngModel，所以它应该起作用。