角材料自动完成

Question

所以我正在尝试创建Angular Material自动完成。目前，我正在使用它，因此显示了选项。当我单击它们时，正确的名称将放置在输入中。

现在，我需要对此进行扩展，当用户键入内容时，可能需要过滤的选项。我一直在关注Angular Material教程，但我总是遇到错误。

[我一直得到：An argument for 'callbackfn' was not provided.，当我尝试使用我的filterOptions时。

同样，在我完成此操作之后，下一步将是，必须在第一个输入中输入名称，并在下一个输入中输入对应的phoneNumber。我目前不确定如何开始这个问题，因此欢迎提出建议！

IDriverDate接口：

export interface IDriverData {
    name: string;
    phone: string;
}

messages.component.ts：

我的驱动程序数据在driverData内，老实说，我不确定为什么需要使用filteredOptions，而我无法直接对数据进行此操作。

driverData: IDriverData[];
filteredOptions: Observable<IDriverData[]>;



ngOnInit(): void {
    this.getMessages();

    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(driver => typeof driver === 'string' ? driver : driver.name),
        map(name => name ? this._filter(name) : this.driverData.slice())
      );
   }

displayFn(driver): string {
    return driver ? driver.name : driver;
  }

private _filter(name: string): IDriverData[] {
    const filterValue = name.toLowerCase();

    return this.driverData.filter(driver => driver.name.toLowerCase().indexOf(filterValue) === 0);
  }

messages.component.html：

<div>
    <mat-card>
        <mat-card-title>Verstuur een bericht:</mat-card-title>
        <mat-divider></mat-divider>
        <mat-card-content>
            <div class="input">
                <mat-form-field>
                    <input matInput placeholder="Naam" [(ngModel)]="name" [formControl]="myControl" [matAutocomplete]="auto">
                    <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                        <mat-option *ngFor="let driver of driverData" [value]="driver">
                            {{driver.name}}
                        </mat-option>
                    </mat-autocomplete>
                </mat-form-field>

                <mat-form-field>
                    <input matInput placeholder="Telefoonnummer" type="tel" [(ngModel)]="number">
                </mat-form-field>
            </div>
            <mat-divider class="subdivider"></mat-divider>
            <div class="message">
                <mat-form-field>
                    <textarea id="message" matInput placeholder="Bericht: " rows=10 [(ngModel)]="content"></textarea>
                </mat-form-field>
            </div>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button (click)="sendMessages()">Verstuur</button>
        </mat-card-actions>
    </mat-card>
</div>

Answer 1

在mat-option元素中，您不再遍历整个driverData数组，现在应该遍历ObservablefilteredOptions数组以及异步管道：

<mat-option *ngFor="let driver of filteredOptions | async" [value]="driver">

然后，为了捕获您的选择并进行填充，我想使用optionSelected事件。然后，您可以将值从FormControl中拉到this.number变量中。我不会将[[ngModel）] =“ name”放在输入中，它已经有一个FormControl。输入只能使用ngModel或FormControls，不能同时使用。

(optionSelected)="driverSelected()"

然后在driverSelected中：

public driverSelected(): void {
    const driver = this.mycontrol.value;
    this.number = driver.number;
}