Блог

Я пытаюсь изменить второй выпадающий список на «Выбор по умолчанию» … » опция, когда я что-либо меняю в первом выпадающем списке. Но я продолжаю показывать мне пустое пространство, я думаю, что NG добавляет дополнительный тег Option в начале, и я не знаю почему.

Вот мой HTML

  <div>
    <select (change)="onDropChange($event.target.value)" [(ngModel)]="person.name">
  <option value='default' > Select Name</option>
  <option *ngFor="let item of list"> {{item}} </option>
</select>
</div>

<select [(ngModel)]="person.options">
  <option value='default' [selected]="!person.options"> Select Option</option>
  <option *ngFor="let item of options" value="{{item}}"> {{item}} </option>
</select>
  

Вот мой TS

 

  person= {
    person: "sam",
    options: 123
  }
  list = ["kenny", "sam", "stan"];
  options = [122,4324,234,123]

  onDropChange(value){
      this.purchaser.options = null
  }

  

код: https://stackblitz.com/edit/angular-3xo9sv?file=src/app/app.component.ts

Это потому, что у вас нет какой-либо опции с value = null , которая является значением, которому вы присваиваете this.person.options .

Вариант 1

Сделайте ваш параметр по умолчанию равным null:

 <select [(ngModel)]="person.options">
  <option [value]="null" [selected]="!person.options"> Select Option</option>
  <option *ngFor="let item of options" value="{{item}}"> {{item}} </option>
</select>
  

обратите внимание на [value]="null" . Теперь на самом деле есть опция, которая соответствует значению, которое вы ей присваиваете.

Вариант 2

Если вы не хотите, чтобы ваш параметр по умолчанию был равен null, просто убедитесь, что значение, которому вы присваиваете this.person.options , совпадает с вашим параметром по умолчанию. В коде, который вы предоставили value='default' , так что в основном вам просто нужно

 onDropChange(value){
    this.person.options = 'default';
}
  

Убедитесь, что ваш объект имеет правильные типы, поскольку прямо сейчас он объявляет его как number, поэтому у вас может возникнуть проблема. Вы можете создать свой тип, но простое / быстрое решение для устранения этой проблемы — объявить его как any .
Опять же, я предлагаю определить это лучше.

 export class AppComponent  {
    person:any = {
        name: "sam",
        options: 123
    }
    ...
}