我有一个小时列表框(角度材料列表框,由数字1到12组成),我将转换为自动完成的垫子 .
列表框是 not in a reactive form .
下面是我创建模板的html,用于引入静态列表选项 .
<table>
<tr>
<td>
<mat-form-field>
<input type="text" [(ngModel)]="fromCreateDateTime.Hour" [ngModelOptions]="{standalone: true}" placeholder="Hour" matInput [matAutocomplete]="autoFromCreateDateTimeHour">
<mat-autocomplete #autoFromCreateDateTimeHour="matAutocomplete" placeholder="Hour" [displayWith]="displayFn">
<mat-option *ngFor="let hour of hoursList" [value]=" hour ">{{hour.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</td>
</tr>
</table>
这里 hoursList
是一个如下定义的数组 . 这不是一个可观察的 .
hoursList: Array, any > =
export const hoursList: Array < any > = [{
name: "00",
value: 0
}, {
name: "01",
value: 1
}, {
name: "02",
value: 2
}, {
name: "03",
value: 3
}, {
name: "04",
value: 4
}, {
name: "05",
value: 5
}, {
name: "06",
value: 6
}, {
name: "07",
value: 7
}, {
name: "08",
value: 8
}, {
name: "09",
value: 9
}, {
name: "10",
value: 10
}, {
name: "11",
value: 11
}, {
name: "12",
value: 12
}];
如何将过滤器(在mat输入中键入)应用于mat自动完成,因为此处的数据是非异步数据 .
1 回答
如果你考虑使用一个字符串数组,那么非常简单:
而你的模板:
这是你的参考Sample StackBlitz .