Фильтрация на основе раскрывающегося списка в угловых 4

Question

У меня есть таблица списка счетов с указанием суммы, даты, номера счета, статуса и т. Д. Я создал раскрывающийся список, в котором содержится статус.Если я выбрал статус в раскрывающемся списке, мне нужно отфильтровать таблицу и показать только строку, содержащую выбранный статус.

Я просто изучаю угловой 4. Я попробовал следующий код, но этоне работает.

На странице HTML:

<select [(ngModel)]="selected" name="status" placeholder="select" (ngModelChange)="onOptionsSelected($event)">
        <option *ngFor="let sta of status" [ngValue]="sta">{{sta}}</option>
    </select>

На странице Component.ts:

   selected:any;

    stat = [
        { value: "All", id: "123" },
        { value: "Unpaid and sent", id:"12" },

        { value: "Unpaid and sent",id:"23" },
        { value: "Unpaid and not sent" ,id:"45"},
        { value: "Unpaid with due date",id:"56" },
        { value: "Paid",id:"57" },
        { value: "Open",id:"78" },
        { value: "Overdue" ,id:"45"}];

    status = ['Select Status', 'All', 'Unpaid and sent', 'Unpaid with due date', 'Paid', 'Open', 'Overdue'];

constructor() {
        this.selected = this.stat;
        }

        onOptionsSelected(event) {
        let value = event.target.value;
         console.log(this.selected);

    }

Кто-нибудь может мне помочь?Спасибо

Answer 1

Проблема выше в том, что вы устанавливаете массив как выбранный, просто удалите эту строку внутри конструктора,

constructor() {
   this.selected = this.stat; //Not necessary
}

И, вы можете использовать array.filter с ngModel selected

onOptionsSelected() {
      console.log(this.selected); 
      this.filtered = this.stat.filter(t=>t.value ==this.selected);
}

STACKBLITZ DEMO