Question

因此，我尝试创建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>

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

角材料自动完成

1 个答案: