Angular - как установить опцию по умолчанию в раскрывающемся списке

Question

Я пытаюсь реализовать раскрывающийся список с помощью ngfor, но у меня есть две проблемы:

1. Я не получаю значение по умолчанию, выбранное для первого элемента.Массив имеет 4 элемента.С первым ngFor на mat-select я хочу выбрать 4 элемента, и первый элемент предпочтительно выбирается по умолчанию.

2. Там отображается нежелательная пустая стрелка (линия) наконец.

Может кто-нибудь, пожалуйста, предложите лучшее решение.Это мои реализации, которые я сделал после просмотра большого количества постов на 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)]='myDefaultValue на вашем <mat-select> и в ваших component.ts добавьте переменную myDefaultValue = level.children[0].value.name

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

Я надеюсь, что у вас есть 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'
                                   }
                           ] 
                    }
            ];

Дайте мне знать, если это не сработает. Я настрою что-то другое.