Как динамически фильтровать ng для строк таблицы с помощью переключателя - PullRequest
Новая
       12

Как динамически фильтровать ng для строк таблицы с помощью переключателя

0 голосов
/ 11 октября 2019

У меня есть две (2) функции в моем файле .ts для двух (2) разных переключателей, с помощью которых я фильтрую таблицу по дате. Две кнопки называются: «действительный» и «недействительный». Переключатель «Неправильно» фильтрует таблицу и отображает все строки с конечной датой «меньше текущей даты», а «Действительный» представляет все строки с конечной датой «меньше и больше текущей даты».

Просто сейчас, когда я нажимаю на одну из переключателей, я получаю правильные строки, но затем, когда я нажимаю на вторую переключающую кнопку, я получаю пустую или нулевую строку.

Как заполнить код .ts, чтобы сделать строки таблицы доступными (динамическими) независимо от нажатой кнопки-переключателя? Ниже мой код:

.html 

<div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="date" (click)="valid()" />
            <label class="form-check-label">Valid</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="date" (click)="invalid()"/>
            <label class="form-check-label">Invalid</label>
        </div>
</div>

<tr *ngFor="let myAccount of Account | filterBy: accountFilter | paginate: { itemsPerPage: count, currentPage: p }; let i = index">
            <td>{{ (p - 1) * count + i + 1 }}</td>
            <td>{{myAccount.name}}</td>
            <td>{{myAccount.startDate}}</td>
            <td>{{myAccount.endDate}}</td>
</tr>

.ts 

Account = [];
currentDate = '';

valid() {
        this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
        this.Account = this.Account.filter(data => {
            return data.startDate < this.currentDate  && data.endDate > this.currentDate});
    }

invalid() {
    this.currentDate = this.datePipe.transform(new Date(),"yyyy-MM-dd");
    this.Account = this.Account.filter(data => {
        return data.startDate < this.currentDate  && data.endDate <= this.currentDate});
}

Как мне поступитьчтобы мой Account = [] по-прежнему содержал все строки таблицы, в то время как я просто использую переключатели для фильтрации или переключения строк по датам?

A, даже если я должен был позжедобавьте третью кнопку-переключатель под названием «ShowAll», после чего она сможет вернуть все строки в таблице.

Спасибо

1 Ответ

0 голосов
/ 11 октября 2019

в файле HTML используйте событие change вместо click . 

<div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" type="radio" name="date" (change)="valid($event)" />
            <label class="form-check-label">Valid</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="date" (change)="invalid($event)"/>
            <label class="form-check-label">Invalid</label>
        </div>
</div>

<tr *ngFor="let myAccount of Account | filterBy: accountFilter | paginate: { itemsPerPage: count, currentPage: p }; let i = index">
            <td>{{ (p - 1) * count + i + 1 }}</td>
            <td>{{myAccount.name}}</td>
            <td>{{myAccount.startDate}}</td>
            <td>{{myAccount.endDate}}</td>
</tr>
...