Как получить и вывести список выбранных опций массива angular машинопись - PullRequest
Новая
       7

Как получить и вывести список выбранных опций массива angular машинопись

1 голос
/ 21 марта 2020

Привет, я пытаюсь получить массив выбранной опции, в настоящее время работает только название компании, потому что я могу получить только одно значение из event.target.value или 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 {

  companies: Company[];
  selectedCompany = [];

  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" [(ngModel)]="selectedCompany"  >
    <option value="">Select</option>
    <option *ngFor="let value of companies" value="{{value.name}}">{{value.name}}</option>
    

  </select>
  <p>
    <span>
      You Selected:{{selectedCompany}}
    </span>
  </p>
</div>

<ul class="list-group list-group-flush">
  <li class="list-group-item">{{selectedCompany}}</li>
  <li class="list-group-item">Company address here</li>
  <li class="list-group-item">Company estimated revenue </li>
</ul>

1 Ответ

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

попробуйте это, изменив тип данных selectedCompany = []; на selectedCompany:Company

и после этого вам нужно изменить значение ниже строки 

 <option *ngFor="let value of companies" value="{{value.name}}">{{value.name}}</option>

на 

<option *ngFor="let value of companies" [Value]="value">{{value.name}}</option>
...