Блог

Я разрабатываю веб-приложение с использованием Angular 11. Компонент получает массив с объектом через входные данные:

 [
   {propery1: "a", property2:"b"},
   {propery1: "c", property2:"d"},
   {propery1: "e", property2:"f"},
]
 

Итак, в файле my_component.ts у меня есть:

 @Input() myArray: any[];
private selectedObject: any; // The current object selected with all its properties!
 

Я хотел бы selectedObject , чтобы весь объект (массива) был выбран через выпадающее меню. Я сделал это вот так:

 <select [(ngModel)]="selectedObject">
    <option *ngFor="let object of myArray;" [ngValue]="object">{{object.property1}}</option>
</select>
 

Значение selectedObject связано с текущим значением object . Я получил то, что хотел, но я не могу понять, почему выпадающий список появляется на экране без выбранных параметров:

Если я открою меню, результаты появятся, как и ожидалось:

И если я выберу свойство, «пустое свойство» исчезнет:

Я бы хотел, чтобы этого не случилось. Я бы хотел 'a' , чтобы значение было видно с самого начала. Этого можно легко достичь, изменив значение ngValue с object.property1 . Но таким образом, привязка не будет работать так, как я хочу ( selectedObject должен быть полный объект и ни одно свойство). Как сделать так, чтобы первое свойство появилось без возникновения этой проблемы?

В вашем файле .ts :

   myArray = [
    {property1: "a", property2:"b"},
    {property1: "c", property2:"d"},
    {property1: "e", property2:"f"},
 ]
 public selectedValue: string 
 public selectedObject: any

 ngOnInit() {
   this.selectedValue = this.myArray[0].property1
   this.onValueChange();
 }

 onValueChange() {
   const found = this.myArray.filter( obj => obj.property1 === this.selectedValue)
   this.selectedObject = found? found[0] : {}
 }
 

В файле you .html

 <select [(ngModel)]="selectedValue" (ngModelChange)="onValueChange()">
<option *ngFor="let item of myArray"
        [value]="item.property1">{{item.property1}}</option>
</select>

<p>selectedvalue : {{selectedValue}}</p>

<p *ngIf="selectedObject">selected object : {{selectedObject.property1}} ; {{selectedObject.property2}}</p>