Установить значение углового материала, выбрать автозаполнение программно

Question

У меня есть простая функция автозаполнения углового материала .Теперь я хочу установить значение / выбранную опцию этого автозаполнения программно.Это мой код:

hardware.component.html

<tr>
    <td class="desc pd7">Firmware</td>
    <td>
        <div class="form-group mb0">
            <mat-form-field class="example-full-width">
                <input type="text" placeholder="Select firmware" aria-label="Number" matInput [formControl]="myControlFirmware" [matAutocomplete]="auto1" (keydown.enter)="$event.preventDefault()">
                <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFirmwares">
                    <mat-option *ngFor="let firmware of filteredFirmwares | async" [value]="firmware" (onSelectionChange)="getIdFromFirmware($event, firmware)">
                        {{ firmware.name }}
                    </mat-option>
                </mat-autocomplete>
            </mat-form-field>
        </div>
    </td>
</tr>

hardware.component.ts

this.miscellaneousTerminalService.getMiscellaneous('firmware').subscribe(data => {
    if(data.success) {
        this.availableFirmwares = data.data;
        this.filteredFirmwares = this.myControlFirmware.valueChanges
        .pipe(
            startWith(''),
            map(valFirmware => this.filterFirmwares(valFirmware))
        );
    }
});

filterFirmwares(valFirmware: any): any[] {
    return this.availableFirmwares.filter(firmware => {
        let name = valFirmware.name ? valFirmware.name : valFirmware;
        return firmware.name.toLowerCase().indexOf(name.toLowerCase()) > -1;
    });
}

displayFirmwares(firmware: any): string {
    return firmware ? firmware.name : firmware;
}

getIdFromFirmware(event, firmware) {
    if(event.isUserInput) {
        this.selectedFirmware = firmware._id;

    }
}

Я пытался установить модель своей прошивки на _id выбранной прошивки или имени, но ничего не работает.Как я могу установить значение программно.Я использую угловой материал @V 7

Answer 1

Вы можете сделать следующее, чтобы выполнить это.

Если вы не уверены в опциях заранее, вы, например, извлекаете их из API, вы можете получить их из MatAutocompleteTrigger, например так.

import { MatAutocompleteTrigger } from '@angular/material'

@ViewChild(MatAutocompleteTrigger) _auto: MatAutocompleteTrigger;

let options = this._auto.autocomplete.options.toArray()

Этот стекаблик устанавливает значение two при нажатии кнопки.Я извлекаю параметры из триггера и использую массив параметров, чтобы установить значение в formControl ... в вашем случае это будет this.myControlFirmware.setValue(options[1].value)

 setValue() {
    let options = this._auto.autocomplete.options.toArray()
    this.myControl.setValue(options[1].value)
  }

Stackblitz

https://stackblitz.com/edit/angular-s3gn1w?embed=1&file=app/autocomplete-simple-example.ts