更新时间:2023-11-29 23:47:34
如果要通过在第一个字母上键入来过滤数组威胁
,则可以像这样过滤数组:
If you want to filter your array menaces
by typing on the first letter, then it is possible to filter your array like this:
HTML:
<select class="form-control"
(change)="mnVuln?.menaceActif?.menace.id = $event.target.value;
updateMenaceProcessus();
filterMenaces($event)">
<option></option>
<option *ngFor="let menace of menaces"
[value]="menace.id"
[selected]="menace.id === mnVuln?.menaceActif?.menace.id">
{{menace.nom}}</option>
</select>
TypeScript:
TypeScript:
origMenaces = [];
methodAPIToGetMenaces() {
this.yourService()
.subscribe(s=> {
this.menaces = s;
this.origMenaces = s;
});
}
filterMenaces(str: string) {
if (typeof str === 'string') {
this.menaces = this.origMenaces.filter(a => a.toLowerCase()
.startsWith(str.toLowerCase()));
}
}
更新1:
如果要按 input
值进行过滤:
HTML:
<input type="text"
(ngModelChange)="filterItem($event)"
[(ngModel)]="filterText">
<br>
<select
#selectList
[(ngModel)]="myDropDown"
(ngModelChange)="onChangeofOptions($event)">
<option value="empty"></option>
<option *ngFor="let item of items">
{{item}}
</option>
</select>
<p>items {{ items | json }}</p>
TypeScript:
TypeScript:
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular 4';
myDropDown : string;
items = ['one', 'two', 'three'];
origItems = ['one', 'two', 'three'];
@ViewChild('selectList', { static: false }) selectList: ElementRef;
onChangeofOptions(newGov) {
console.log(newGov);
}
filterItem(event){
if(!event){
this.items = this.origItems;
} // when nothing has typed*/
if (typeof event === 'string') {
console.log(event);
this.items = this.origItems.filter(a => a.toLowerCase()
.startsWith(event.toLowerCase()));
}
console.log(this.items.length);
this.selectList.nativeElement.size = this.items.length + 1 ;
}
}