Почему опция выбора показывает значения только после того, как я нажму на нее? - PullRequest
Новая
       14

Почему опция выбора показывает значения только после того, как я нажму на нее?

0 голосов
/ 21 марта 2020

Так что, в основном, после того, как я загружаю / перезагружаю страницу, параметры выбора, не отображаемые при первом щелчке, и значения, не отображаемые до второго щелчка, по какой-то причине не будут рады некоторым ответам, я все еще новичок в кодировании, поэтому будьте осторожны со мной: ) 

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>

Thats the problem

1 Ответ

0 голосов
/ 21 марта 2020

Массив 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>
...