时间戳

首页 > 解决方案 > 为什么选择选项仅在我单击后才显示值？

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

问题描述

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

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>

那就是问题所在

标签： htmlangulartypescriptasp.net-corebootstrap-4

解决方案

数组在被调用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>

推荐阅读