각도 4/2 선택에서 특정 필드를 개체를 표시하는 방법은 무엇입니까?

Question

나는 회사 필드 (회사 데이터 형식)가 포함 된 연락처 클래스가 있습니다. 회사 클래스가 있습니다. 회사 개체가있는 회사가 있습니다. 연락처에 대한 수정 구성 요소가 있습니다. 여기서 연락처를 수정할 수 있습니다.

<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 필드에 저장할 수 있습니다 : 그것은 다음과 같이있는 매트 선택 필드가 있습니다. 그것은 작동합니다. 그러나 연락처를 저장하고 다시 편집하려는 경우 contact.company 필드에있는 회사는 mat-select에 표시되지 않습니다. 다른 입력 필드는 다음과 같습니다.

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

현재 연락처 성이 표시됩니다. 그래서 저는 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[]; 
} 

나는 해결책을 가지고 있습니다. 나는 이것이 좋다고 생각하지 않는다 ... 나는이 경로를 가지고있는 contact-routing 모듈을 가지고있다 : { path: 'people/edit/:id', component:ContactEditComponent } 그래서 ContactEditComponent에 ngOnInit void가있다. 이 코드를 작성해야 저장 기능에, 지금

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

:하지만

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 코드를 변경 : 가 나는 것을 수정

for(let i = 0; i < this.selectedCompanies.length; i++) 
{ 
    this.contact.company[i] = this.companies.find(x => x.id == this.selectedCompanies[i]); 
} 

인가 거기 더 나은 해결책?

Answer 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] 
}