angular2 - kendo過濾器不工作

Question

我在角度2過濾中遇到問題。我在onSelectStatus時得到空陣列。誰能告訴我我錯過了什麼？這裏是我的代碼：

app.component.html

<select [(ngModel)]="status" (change)="onSelectStatus(status)" class="form-control" id="status" name="status"> 
 
    <option *ngFor="let status of statuses" [ngValue]="status.value">{{status.value}}</option> 
 
</select>

app.component.ts

status: number; 
 
statuses = []; 
 
selected; 
 
selectedData; 
 

 
ngOnInit() { 
 

 
    console.log(this.userId); 
 
    this.http.post(this.host + '/api/v1.0/merchant/mini-statement', { 
 
     'datefrom': '2017-05-27', 
 
     'dateto': '', 
 
     'userId': this.userId 
 
    }) 
 
    .map(res => res.json()) 
 
    .subscribe(data => { 
 
     this.items = data; 
 
     console.log(this.items); 
 
     this.loadItems(); 
 
    }, error => { 
 
     console.log(error); 
 
    }); 
 

 
    this.statuses = [{ 
 
     id: 1, 
 
     value: 'Successful', 
 
    }, 
 
    { 
 
     id: 2, 
 
     value: 'Voided', 
 
    } 
 
    ]; 
 

 
} 
 

 
constructor(private http: Http) { 
 
    this.selectedData = this.items; 
 
} 
 

 
protected pageChange(event: PageChangeEvent): void { 
 
    this.skip = event.skip; 
 
    this.loadItems(); 
 
} 
 

 
onSelectStatus(val) { 
 
    console.log(val); 
 
    this.selectedData = this.items.filter(x => x.status == val); 
 
    console.log(this.selectedData); 
 

 
}

data.json

Answer 1

這是我對這個問題的修復：

export class RecentSalesComponent implements OnInit { 
 

 
    private gridView: GridDataResult; 
 
    private data: Object[]; 
 
    private pageSize: number = 10; 
 
    private skip: number = 0; 
 

 
    private items: any[]; 
 

 
    status; 
 
    statuses = []; 
 

 
    outlet = ''; 
 
    selected; 
 
    selectedData; 
 

 

 

 
    ngOnInit() { 
 

 
    console.log(this.userId); 
 
    this.http.post(this.host, { 
 
     'datefrom': '2017-05-27', 
 
     'dateto': '', 
 
     'userId': this.userId 
 
     }) 
 
     .map(res => res.json()) 
 
     .subscribe(data => { 
 
     this.items = data; 
 
     this.loadItems(); 
 
     }, error => { 
 
     console.log(error); 
 
     }); 
 

 
    this.statuses = [{ 
 
     id: 1, 
 
     value: 'Successful', 
 
     }, 
 
     { 
 
     id: 2, 
 
     value: 'Voided', 
 
     } 
 
    ]; 
 

 
    } 
 

 
    constructor(private http: Http) { 
 
    this.selectedData = this.items; 
 
    console.log(this.selectedData); 
 
    } 
 

 
    protected pageChange(event: PageChangeEvent): void { 
 
    this.skip = event.skip; 
 
    this.loadItems(); 
 
    } 
 

 
    private loadItems(): void { 
 
    this.gridView = { 
 
     data: this.items.slice(this.skip, this.skip + this.pageSize), 
 
     total: this.items.length 
 
    }; 
 
    } 
 

 
    onSelectOutlet(val) { 
 
    console.log(val); 
 
    this.selectedData = this.items.filter(x => x.customerName == val); 
 
    } 
 

 

 
    onSelectStatus(val) { 
 
    this.selectedData = this.items.filter(x => x.status == val); 
 
    this.gridView = { 
 
     data: this.selectedData.slice(this.skip, this.skip + this.pageSize), 
 
     total: this.selectedData.length 
 
    }; 
 
    } 
 

 
}

Answer 2

你已申報的狀況爲數字，但具有ID和值類型的對象了。

將其更改爲你的類型的狀態

status: Status; 

和更改模型，

<select [(ngModel)]="status.value" (change)="onSelectStatus(status)" class="form-control" id="status" name="status"> 

相應TS會，

onSelectStatus(stat) { 
    console.log(stat); 
    this.selectedData = this.items.filter(x => x.status == stat.value); 
    console.log(this.selectedData); 

}