为一个输入实现多个自动完成

Question

我目前有一个具有自动完成功能的输入字段，我试图为每个输入的项目本质上进行两阶段自动完成，例如输入我将显示 IP 地址，选择在输入中输入“ipAddress=”，然后我会喜欢根据所选选项在同一输入中显示另一个自动完成以显示可用地址。然后他们会添加一个逗号并重复添加任何其他过滤器。我只是不确定这会被称为什么或如何实现它，所以任何提示或想法将不胜感激

Answer 1

尝试这样的事情：

TS:

itemList: any[] = [
  { name: "item1", IPForm: new FormControl(), AnotherListValue: [], AnotherForm: new FormControl() },
  { name: "item2", IPForm: new FormControl(), AnotherListValue: [], AnotherForm: new FormControl() }
];

// Fill my another value regarding to selected IP
onSelectedIP(selected: any, item: any) {
    this.myService.getListValue(selected.IP).subscribe(result => item.AnotherListValue = result);
}

HTML

<div *ngFor="let item of itemList">
    <mat-form-field>
        <input type="text" placeholder="Select IP" matInput [matAutocomplete]="itm" [formControl]="item.IPForm">
        <mat-autocomplete autoActiveFirstOption #itm="matAutocomplete" [displayWith]="displayFn" (optionSelected)="onSelectedIP($event.option.value, item)">
            <mat-option *ngFor="let option of IPList | async" [value]="option">
                {{option.IP}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</div>

您只需要添加第二个自动完成等等