如何在 Angular 4/2 选择中显示对象的某个字段？

Posted 2023-03-13

【中文标题】如何在 Angular 4/2 选择中显示对象的某个字段？

【英文标题】：how to display an object certain field in Angular 4/2 selection?

【发布时间】：2018-05-15 13:01:34

【问题描述】：

我有一个联系人类，其中包含一个公司字段（公司数据类型）。我有一个公司班。我有公司，它们是公司对象。我有一个联系人编辑组件，您可以在其中编辑联系人。它有一个 mat-select 字段，如下所示：

<mat-form-field class="matffield">
    <mat-select [(ngModel)]="contact.company" name="contactCompany" placeholder="Company" multiple>
        <mat-option *ngFor="let company of companies" [value]="company">company.name</mat-option>
    </mat-select>
</mat-form-field>

所以您可以从我拥有的公司中进行选择，并将其保存到contact.company 字段中。有用。但是，如果您保存联系人并想再次对其进行编辑，则 mat-select 将不会显示位于 contact.company 字段中的公司。另一个输入字段是这样的：

<mat-form-field class="matffield">
    <input matInput [(ngModel)]="contact.full_name" name="contactFullName" placeholder="Teljes név">
</mat-form-field>

是显示当前的contact.surname。所以我想显示公司名称，目前在contact.company中。

当我这样做时它会起作用：

<mat-form-field class="matffield">
    <mat-select [(ngModel)]="contact.company" name="contactCompany" placeholder="Company" multiple>
        <mat-option *ngFor="let company of companies" [value]="company.id">company.name</mat-option>
    </mat-select>
</mat-form-field>

，但这是不正确的，因为contact.company 将只包含公司的ID。

求助，我的联系班：

import  Company  from './company';

export class Contact
    id: number;
    company: Company[];
    full_name: string;
    surname: string;
    middle_name: string;
    forename: string;
    nickname: string;
    phone: string;
    email: string;
    primary_communication_chanel: string;
    rank: string;
    greeting: string;
    selected: boolean;

还有我的公司班：

export class Company
    id: number;
    logo: string;
    name: string;
    phone: string;
    email: string;
    website: string;
    facebook: string;
    country_code: string;
    hq_country: string;
    hq_zipcode: number;
    hq_settlement: string;
    hq_address: string;
    bi_name: string;
    bi_country: string;
    bi_zipcode: number;
    bi_settlement: string;
    bi_address: string;
    taxnumber: number;
    mail_name: string;
    mail_country: string;
    mail_zipcode: number;
    mail_settlement: string;
    mail_address: string;
    industry_id: number;
    employeesnum_id: number;
    yearlyincome_id: number;
    founded: number;
    selected: boolean;
    project: number[];

已编辑

我有一个解决方案。我不认为这很好... 我有一个联系人路由模块，我有这条路由： path: 'people/edit/:id', component:ContactEditComponent 所以在 ContactEditComponent 中有一个 ngOnInit void。 我修改了：

this.route.paramMap
    .switchMap((params: ParamMap) => this.contactsService.getContact(+params.get('id')))
    .subscribe(contact => this.contact = contact;
      contact.company.forEach(company => this.selectedCompanies.push(company.id)));

我还更改了 html 代码：

<mat-select [(ngModel)]="selectedCompanies" name="contactCompany" placeholder="Cég" multiple>
    <mat-option *ngFor="let company of companies" [value]="company.id">company.name</mat-option>
</mat-select>

但是现在，我必须在保存功能中编写以下代码：

for(let i = 0; i < this.selectedCompanies.length; i++)

    this.contact.company[i] = this.companies.find(x => x.id == this.selectedCompanies[i]);

有没有更好的解决方案？

【参考方案1】：

你能做的就是把选定的公司做成这样。

在html中：

<mat-option (onSelectionChange)="setCompanies(company)" />

在组件中：

private selectedCompanies: any[] = [];

private setCompanies(_company: any)
  this.selectedCompanies.push(_company);
  // lastSelected = this.selectedCompanies[this.selectedCompanies.length -1]

【讨论】：

这将只保存一个，我选择的最后一个公司到 selectedCompany。然后？当我保存并再次编辑时，如何显示选定的公司？

啊，让我改一下吧。

哦，当我选择 2 家公司时，这会将 10 家公司推送到 selectedCompanies 数组。为什么？我做错了什么？以及当我再次编辑联系人时如何显示选择的公司？

好吧，这就是 mat-options 正在做的事情 ;) 抱歉，帮不上忙。也许检查 $event.isUserInput === true

事情是当我选择一些公司时，保存contact.company 是包含选择的公司。因此，当我再次编辑它并且不更改公司时，contact.company 具有相同的公司。我想知道当我编辑联系人时，contact.company 中已经有哪些公司。