Angular Форма вложенных объектов

Question

У меня есть форма, где пользователь вводит некоторые данные, а затем отправляет POST. Сейчас я работаю над функцией, позволяющей редактировать ранее введенную информацию. Некоторые из входных данных в полях имеют вложенные объекты, например:

export class Transfer {
    constructor(
        public id: number,
        public destination: string,
        public market: string,
        public project: Project,
        public workstream: Workstream,
        public contact: Contact
    )
}

export class Workstream {
    constructor(
        public id: number,
        public workStream: string
    ) { }
}

export class Contact {
    constructor(
        public id: number,
        public name: string
    ) { }
}

При загрузке информации в форму поля, содержащие строки или числа, работают хорошо, но объекты не отображаются правильная информация. Поле для контакта дает мне [объект объекта], в то время как рабочий поток не выбирает нужный вариант из выпадающего списка.

            <!-- Workstream -->
            <mat-form-field class="example-full-width">
                <mat-label>Workstream</mat-label>
                <mat-select [(ngModel)]="transfer.workstream" name="workstream" [(value)]="transfer.workstream">
                    <mat-option *ngFor="let workstream of workstreams$ | async" [value]="workstream">
                        {{workstream.workStream}}
                    </mat-option>
                </mat-select>
            </mat-form-field>

            <!-- Contact -->
            <mat-form-field class="example-full-width">
            <input matInput placeholder="Contact" [(ngModel)]="transfer.contact" name="contact" value="transfer.contact.name"
                #contactSearchBox (input)="searchContact(contactSearchBox.value)" [matAutocomplete]="auto">
            </mat-form-field>

            <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let contact of contacts$ | async" [value]="contact.name"
                    (click)="selectContact(contact)">
                    {{contact.name}}
                </mat-option>
            </mat-autocomplete>

В поле контакта пользователь может искать по имени, что работает. Любые подсказки о том, как это реализовать? Спасибо!

Answer 1

Исправлены обе проблемы, благодаря Бадис Мерабет и Angular Материал .

Чтобы исправить выпадающий список, я добавил [compareWith]="compareObjects" к mat-select и использовал ту же функцию, которая описана в ссылке.

Моя панель поиска была исправлена ​​добавлением [displayWith]="displayFn" к mat-autocomplete, используя ту же технику, что и в Angular Материал.

Answer 2

mat-option должно иметь строковое значение. Таким образом, привязка [value]="workstream" должна быть изменена на [value]="workstream.workStream". Это должно работать. Однако, если вам нужно сохранить весь объект, вам нужно go с компонентом автозаполнения, чтобы сохранить весь объект в виде модели в форме, и использовать функцию viewFormatter, чтобы отображать только те поля, которые вы хотите (в автозаполнение результатов или показ выбранного объекта).