选择所选选项由于某种原因不起作用=/

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 应用程序中，当在 select 上使用 [(ngModel)] 的两种方式绑定时，最初选择的选项将始终设置为与 ngModel 的值匹配的选项。

在您的示例中，从未设置 selectedCompany 的初始值，这就是您的初始页面加载显示菜单未选择任何内容的原因。您将需要为所有选项设置一个值，包括第一个使其工作的选项。

现在，由于您没有提供名为 Company 的模型结构，我将即兴发挥并假设它包含两个元素，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);
}