Javascript 无法在mat select multiple中显示数组值

我有一个数组值，这些值显示在Chrome调试器上，如下所示：

value: Array(3)
    0: EmployeeDto {id: 1, name: "John"}
    1: EmployeeDto {id: 2, name: "Marry"}
    2: EmployeeDto {id: 3, name: "Thomson"}
length: 3

employees =  this.employees ? this.employees : [];

我将这些值分配给相关变量，如下所示：

value: Array(3)
    0: EmployeeDto {id: 1, name: "John"}
    1: EmployeeDto {id: 2, name: "Marry"}
    2: EmployeeDto {id: 3, name: "Thomson"}
length: 3

employees =  this.employees ? this.employees : [];

但是，尽管我通过id名称对将这些值传递给

mat select

，但它不会显示这些值。但是，当我在打开的窗口上使用选定的值时，它们将通过其id值检索，并且可以使用这些id值更新记录

---

我认为问题与以错误的格式传递这些值有关，但据我所知，应该传递id-value对，以便使用id保存值（用于提交），使用name显示这些值。另一方面，如果我只将名称值作为数组

[…]

传递，则它们将被重新显示，不会出现任何问题。那么，我应该如何在

mat select

上显示这些值呢？

更新包含服务*

一般来说，在一个mat中，我们需要考虑两件事，即选择多个与一个对象数组馈送的对象 1.-结果（在FormControl或使用[（ngModel）]的变量中）是一个数组 2.-我们通常希望在变量或表单控件中存储对象的一个属性并显示另一个属性

那么，一个典型的例子

  toppingList: any[] = [
    {id: 1, name: "John"},
    {id: 2, name: "Marry"},
    {id: 3, name: "Thomson"}];

需要一个吸气剂吗

  toppings = new FormControl();

  get toppingsName()
  {
    return this.toppings.value?
              this.toppingList.filter(t=>this.toppings.value.indexOf(t.id)>=0)
              .map(x=>x.name):
              null
  }

如果我们有一个返回数组的服务，我们可以编写

this.dataService.getToppings1().subscribe((res:number[])=>{
     this.toppings.setValue(res)
})

浇头
{{toppingsName}}
{{topping.name}

或者使用ngModel

  value:any=null;
  get toppingsNameValue()
  {
    return this.value?this.toppingList.filter(t=>this.value.indexOf(t.id)>=0).map(x=>x.name):null
  }

如果我们有一个服务，它返回一个由逗号分隔的字符串，并带有toppings，那么我们可以这样做——首先看一看，这是一个spit，但是我们需要将这个字符串数组转换为数字数组-

this.dataService.getToppings2().subscribe((res:string)=>{
     this.value=res.split(',').map(x=>+x)
})

浇头
{{toppingsNameValue}}
{{topping.name}

好的，我们也可以说我们想要一个对象数组（它不是ussual，记住总是可以通过

this.toppingList.filter（t=>this.toppings.value.indexOf（t.id）>=0

我们能做到

  toppingsObject = new FormControl();
  get toppingsObjectName()
  {
    return this.toppingsObject.value?this.toppingsObject.value.map((x:any)=>x.name):null
  }

现在，我们的服务将返回一个对象数组。但是我们不能直接使用一个对象来为我们的控件提供数据。我们需要一个“比较函数”。它只是一个有两个参数的函数。如果我们认为两个对象相等，我们将返回true。类似的

 compareFn(a:any,b:any){
   if (a.id==b.id) 
     return true
   else
     return false
 }
 

好的，通常我们删节并写这个函数

 compareFn=(a:any,b:any)=>a.id==b.id

现在我们对该服务的订阅如下

this.dataService.getToppings3().subscribe((res:any[])=>{
     this.toppingsObject.setValue(res)
})

浇头
{{toppingsObjectName}}
{{topping.name}

请注意，在本例中，[value]是自己的“topping”

注意：通常我们将数据作为字符串存储在dbs中

---

我把这三种情况放在这里，你能把你的全部代码粘贴在这里吗？这样很容易调试没有@Sakshi说的代码就不容易调试了，如果你能在stackblitz中复制就更好了。我猜在渲染组件时数据不可用，所以你的

mat select

实际接收

[]

谢谢您的回复，但是在渲染之前数据是可用的。我只是想知道是否应该绑定为包含如上所示的is和name值的对象数组，或者通过映射上述值来传递name值。如果您也给出一个示例，这将非常有帮助。下面的示例似乎与我的示例类似，但我不确定t在哪里他在我的方法中犯了错误？我不清楚你的数组怎么样，但是看起来数组中的每个元素都是一个对象，每个对象都有两个属性，使用

employees=this.employees？this.employees.map（x=>x.EmployeeDto）：[]

一句话，它非常完美，非常感谢您的精彩解释和演示代码。在您的详细解释的帮助下，我了解了许多有关multple select的内容；）投票通过了！我唯一不能确切理解的是

this.toppingsObject.value.map（（x:any）=>x.name）

line。在第三个示例中，我们使用object作为

[value]

而不是id，但是

这个.toppingobject.value.map（（x:any）=>x.name）

只传递name参数，我想。Hpw id参数是在html中检索的，在这个示例中，[value]是自己的“topping”？

toppingsObjectName

是我们在编辑中显示的。

this.toppingsObject

是表单控件，

this.toppingsObject.value

是值，是对象数组，

map

在字符串数组中变换对象数组。

map

在新数组的每个元素中创建一个新数组是“某物”与原始数组相关。数组的“每个”元素只是原始Yes的属性“name”，但我提到的一点是：

this.toppingList.map（x=>console.log（x.name））；

只返回名称。但在这种情况下，当我们只有名称字段时，我们如何在提交表单时传递它们的id？第二个问题是，我认为使用

[value]

参数来显示以前记录的选择列表值。那么，在这种情况下，

[value]=“topping”之间的区别是什么

和

[value]=“topping.id”

？