无法在数组中推送 selected 项目 - Angular material mat select 多个

Question

谁能帮我找出我在将数据推送到空数组时哪里做错了？

所以，我正在尝试仅推送选定的值（即仅选中为真）。但我不能进入循环

我现在的状态

const vals = [];
    if (e && e.source.selected.length > 0) {
      console.log('selected values', e.source.selected);
      const sel = e.source.selected;
      sel.forEach((e: any) => {
        if (sel._selected) {
          vals.push(e);
          console.log('EE', e);
        }
      });
    }

demo blitz

预计：

selectedList : [
{ id: '0' }, { id: '1' }, { id: '2' }
]

用途：

试图在表单的编辑模式下绑定相同的数据

Answer 1

看来你的if条件有误，更正后的版本应该如下：

const vals = [];
if (e && e.source.selected.length > 0) {
  console.log('selected values', e.source.selected);
  const sel = e.source.selected;
  sel.forEach((e: any) => {
    if (e.selected) {
      vals.push({"id": e.value});
      console.log('EE', {"id": e.value});
    }
  });
}

除非你尝试不同的东西。您可以尝试在循环内的 if 条件之前放置一个控制台语句来检查出了什么问题。

Answer 2

试试这个

onSelectingToppings(e: any) {

const vals:any[] = [];
if (e && e.source.selected.length > 0) {
  // console.log('selected values', e.source.selected);
  const sel = e.source.selected;
  sel.forEach((item: any) => {
    if (item._selected) {
      vals.push(item);
    }
  });
  console.log(vals.length)
}
}

Answer 3

添加可选链接以防止在没有值 selected/page 初始化时出错。然后 sel 保存选定值的数组。请参阅下面的更新代码

    if (e && e.source?.selected?.length > 0) {
      console.log('selected values', e);
      const sel = e.source.selected;
      sel?.value?.forEach((e: any) => {
          vals.push(e);
          console.log('EE', e);
    
      });
    }

Answer 4

你根本不需要你的功能。完全删除它，而不是做

console.log(e.source.value);

它会自动包含所有选定的值！

每次您进行更新时，数组也会更新为仅包含选定的值。

如果你想改造它

expected:

selectedList : [ { id: '0' }, { id: '1' }, { id: '2' } ]

那就去做吧

let selectedList = e.source.value.map((elem: number) => ({ id: elem }));
console.log(selectedList);

无法在数组中推送 selected 项目 - Angular material mat select 多个

Can't push selected items in array - Angular material mat select multiple

javascript

typescript

ecmascript-6

angular-material

angular