为什么选择选项仅在我单击后才显示值？

Question

所以基本上在我加载/重新加载页面后，第一次单击时未显示选择选项，并且由于某种原因直到第二次单击时才显示值 很高兴得到一些答案 我还是新手，所以对我温柔一点:)

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();
    

  }

  loadCompanies() {
    this.companyService.getCompanies().subscribe((companies: Company[]) => {
      this.companies = companies;
    }, error => {
      this.alertify.error(error);
    });
  }

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

}

<div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
  <label for="">Select Company</label> <br>

  <select id="select" data-target="#navbarDropdown" [(ngModel)]="selectedCompany"  >
    <option value="">Select</option>
    <!-- <option *ngFor="let value of companies" value="{{value.name}}">{{value.name}}</option> -->
    <option  *ngFor="let value of companies" [ngValue]="value">{{value.name}}</option>
      </select>
</div>



<!-- <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 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

companies 数组在调用 loadCompanies() 之前已声明但未初始化。因此，最好将模板包装在 *ngIf 指令中，以确保数组在使用前被初始化。

<ng-container *ngIf="companies">
  <div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
    <label for="">Select Company</label> <br>
    <select id="select" data-target="#navbarDropdown" [(ngModel)]="selectedCompany"  >
      <option value="">Select</option>
      <option  *ngFor="let value of companies" [ngValue]="value">{{value.name}}</option>
    </select>
  </div>
</ng-container>

<ng-container *ngIf="selectedCompany">
  <ul 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>
</ng-container>