角材料自动完成

问题描述 投票:1回答:1

所以我正在尝试创建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>
angular typescript angular-material
1个回答
0
投票

在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;
}
热门问题
推荐问题
最新问题