Выберите выбранную опцию по какой-то причине не работает = /

Question

[ По какой-то причине выбранная опция выбора не показывает никакого значения, только пустая область, только при щелчке по ней отображаются значения. Я проверил файлы css и, похоже, не знаю, что вызывает проблему, когда я удаляю [(ngModel)], он работает, но не получает значения = /

import { Component, OnInit } from '@angular/core';
import { Company } from '../_models/company';
import { CompanyService } from '../_services/company.service';
import { AlertifyService } from '../_services/alertify.service';




@Component({
  selector: 'app-company',
  templateUrl: './companies.component.html',
  styleUrls: ['./companies.component.css']
})
export class CompaniesComponent implements OnInit {
  selectedCompany: Company;
   companies: Company[];




  constructor(private companyService: CompanyService, private alertify: AlertifyService) { }




  ngOnInit() {
    this.loadCompanies();


  }

  async loadCompanies() {
    this.companyService.getCompanies().subscribe((companies: Company[]) => {
      this.companies = companies;

    }, error => {
      this.alertify.error(error);
    });
  }

  // selectedChangeHandler(event: any) {
  //   this.selectedCompany = event.target.value;
  // }

}

<ng-container *ngIf="companies">
 <div  class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
    <label  for="">Select Company</label> 
    <select class="form-control"    [(ngModel)]="selectedCompany"  >
      <option  selected> -- select an option -- </option>

      <option  *ngFor="let value of companies"   [ngValue]="value">{{value.name}}</option>
    </select>
  </div>
</ng-container>





<!--Just a test--->
<!-- <select class="form-control col-lg-8" #selectedValue name="selectedValue" id="selectedValue" [(ngModel)]="company" (ngModelChange)="assignCorporationToManage($event)">
  <option *ngFor="let value of companies" [ngValue]="company">{{value.name}}</option>
</select> -->

<ul *ngIf="selectedCompany" class="list-group list-group-flush">
  <li class="list-group-item">Company name: {{selectedCompany.name}}</li>
  <li class="list-group-item">Company address: {{selectedCompany.address}}</li>
  <li class="list-group-item">Company estimated revenue: {{selectedCompany.estimatedRevenue}}₪</li>
</ul>

Answer 1

Я вижу несколько проблем с вашим примером, поэтому я попытаюсь помочь вам, предложив другой подход и объясняя, что я делаю по пути.

В приложении Angular при использовании двух При связывании с [(ngModel)] для выбора, изначально выбранный параметр всегда будет установлен на тот, который соответствует значению ngModel.

. В вашем примере начальное значение selectedCompany никогда не устанавливается Именно по этой причине ваша начальная загрузка страницы отображает меню, в котором ничего не выбрано. Вам нужно будет установить значение для всех ваших опций, включая первый, чтобы заставить это работать.

Теперь, так как вы не предоставили структуру вашей модели под названием Company, я собираюсь импровизировать и предполагать, что он содержит 2 элемента, name и value. Так что просто помните, что вам нужно отрегулировать то, что у меня есть ниже, чтобы соответствовать фактической структуре ваших данных.

Во-первых, для тегов опций в вашем выборе в шаблоне, id предлагает использовать атрибут value, который мы будем заполнять строками вместо ngValue, который может использоваться для хранения объекта или строки. Вы можете получить объект, который содержит все необходимые данные, через событие change.

Позволяет настроить файл шаблона следующим образом:

<select class="form-control" [(ngModel)]="selectedCompany" (change)="companyChange($event.target.value)">
      <option [value]="'init'">-- select a company --</option>
      <option  *ngFor="let company of companies" [value]="company.value">{{company.name}}</option>
</select>

Далее, в файле компонента , давайте изменим то свойство, которое мы используем для двухсторонней привязки вашего выбора, чтобы оно было напечатано в виде строки:

selectedCompany:string;

Далее, давайте создадим новое свойство, набранное для вашей модели который мы в конечном итоге установим для выбранной компании:

myCompany:Company;

Далее, установите изначально выбранный параметр в вашем компоненте так, чтобы «- выбрать компанию -» отображалось как изначально выбранный параметр:

ngOnInit() {
  this.selectedCompany = 'init';
  this.loadCompanies();
}

И, наконец, внутри события change вы можете использовать метод find() для получения полного набора данных, который вам нужен:

companyChange(value) {
 this.myCompany = this.companies.find(element => element.value === value);
 console.log("User selected the company:", this.myCompany);
}

Надеюсь, это поможет.