Angular - 如何在下拉列表中设置默认选项

Question

我正在尝试使用 ngfor 实现下拉列表，但我有两个问题。

1. 我没有在第一个元素上设置默认值 select。该数组有 4 个元素。第一个 ngFor 在 mat-select 我想要 select 4 个项目，第一个项目最好是默认 selected。

2. 末尾显示了不需要的空箭头（线）。

有人可以提出更好的解决方案吗？这是我的实现，我在浏览了很多关于这个主题的 post 之后完成的。

  <mat-select *ngFor="let level of myArray; let i=index " placeholder="{{myArray[i+1].name}}">
           <mat-option *ngFor="let child of level.children | keyvalue" value="{{child.value.name}}" >
              {{child.value.name}}
           </mat-option>
            {{level.name}}
  </mat-select>

Answer 1

尝试使用名称绑定值：[value]="{{child.value.name}} 而不是 value="{{child.value.name}}"

也就是在这行代码中：

<mat-option *ngFor="let child of level.children | keyvalue" value="{{child.value.name}}" >

Answer 2

在您的 <mat-select> 中提供 [(value)]='myDefaultValue 并在您的 component.ts 中添加变量 myDefaultValue = level.children[0].value.name

Answer 3

我希望你有这样的html和数组结构。如果不是请帮助我，我将根据您的数据调整数组结构。

// CSS
 .drop-down-selection{
     min-height: 30px;
     border: 1px solid #000;
     margin-top: 10px;
     margin-bottom: 10px;
  }
<mat-select *ngFor="let level of myArray; let i=index" placeholder="{{level.name}}" class="drop-down-selection" [(value)]="level.children[0]['name']">
   <mat-option *ngFor="let child of level.children | keyvalue" value="{{child.value.name}}">
      {{child.value.name}}
   </mat-option>
</mat-select>


    this.myArray = [
                    {
                           name: 'A',
                           children: [
                                   {
                                           name: 'One',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'Two',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'B',
                           children: [
                                   {
                                           name: 'three',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'four',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'C',
                           children: [
                                   {
                                           name: 'five',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'six',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'D',
                           children: [
                                   {
                                           name: 'seven',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'Two',
                                           desc: 'No description'
                                   }
                           ] 
                    },
                    {
                           name: 'E',
                           children: [
                                   {
                                           name: 'eight',
                                           desc: 'No description'
                                   },
                                   {
                                           name: 'nine',
                                           desc: 'No description'
                                   }
                           ] 
                    }
            ];

如果这不起作用，请告诉我。我会调整一些其他的东西。