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

Question

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

1. 我没有在第一个元素上选择默认值。该阵列有4个元素。使用mat-select中的第一个ngFor，我想选择4个项目，并且默认情况下最好选择第一个项目。
2. 最后显示了一个不需要的空箭头（线）。

有人可以建议一个更好的解决方案。这是我的实现，我在浏览了很多关于这个主题的帖子之后做了。

  <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

我希望你有这样的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'
                                   }
                           ] 
                    }
            ];

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

Answer 2

尝试将值与名称绑定：[value] =“{{child.value.name}}而不是value =”{{child.value.name}}“

这就是这行代码：

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

Answer 3

在你的[(value)]='myDefaultValue和你的组件中提供<mat-select>。添加变量myDefaultValue = level.children[0].value.name