Question

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

我没有在第一个元素上选择默认值。该数组有4个元素。对于第一个ngFor，请选择4个项目，最好默认选择第一个项目。
在结尾处显示一个不需要的空箭头（线）。

请有人提出更好的解决方案。这是我的实现，是在浏览有关该主题的大量SO帖子之后完成的。

  <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}}“ < / strong>

在这行代码中：

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

Answer 2

在[(value)]='myDefaultValue上和组件中提供<mat-select>。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'
                                   }
                           ] 
                    }
            ];

让我知道这是否行不通。否则我将进行一些调整。

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

3 个答案: