角材料自动完成

时间:2019-12-11 15:56:16

标签: angular typescript angular-material

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

现在我需要扩展它,当用户键入内容时,可能的选项需要过滤。我一直在关注Angular Material教程,但是我总是出错。

当我尝试使用我的filterOptions时,我会不断得到:An argument for 'callbackfn' was not provided.

同样,在完成此操作之后,下一步将是,必须将名称放置在第一个输入中,并将相应的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>

1 个答案:

答案 0 :(得分:1)

在mat-option元素中,您不再遍历整个driverData数组,现在应遍历Observable FilteredOptions数组以及异步管道:

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