Как управлять таблицей ngfor, переключаться между двумя массивами

Question 1

Я хотел бы знать, есть ли простой способ разбора разных массивов на одну таблицу * ngfor. У меня есть следующие коды:

.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 = [];
radioAccount = [];
currentDate = '';

ngOnInit() {
    showAll();
}
showAll() {
       return this.acctService.getAccount().subscribe(data => this.Account = data);
}

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

Вы можете видеть, что у меня есть два массива, как мне отобразить содержимое массива «radioAccount» при нажатии переключателя? То есть возможность переключения между содержимым «Учетной записи» и содержимым «RadioAccount». Я не думаю, что повторение кода * ngfor с * ngif - это решение.

arrays angular ngfor

1

Pleasure 14 Окт 2019 в 12:11

Answer

Вы можете создать массив, который не будет фильтроваться, например, AccountSource, а затем вы можете назначить исходные значения (AccountSource) для Account:

Account = [];
AccountSource= [];

showAll() {
   return this.acctService.getAccount()
       .subscribe(data => {
            this.Account = data;
            this.AccountSource = data;
       });
}

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});
}

setSourceData() {
    this.Account = this.AccountSource;
}

И вызывайте метод setSourceData(), когда хотите увидеть исходные значения.

0

StepUp 14 Окт 2019 в 09:43

Question 2

Вы можете создать массив, который не будет фильтроваться, например, AccountSource, а затем вы можете назначить исходные значения (AccountSource) для Account:

Account = [];
AccountSource= [];

showAll() {
   return this.acctService.getAccount()
       .subscribe(data => {
            this.Account = data;
            this.AccountSource = data;
       });
}

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});
}

setSourceData() {
    this.Account = this.AccountSource;
}

И вызывайте метод setSourceData(), когда хотите увидеть исходные значения.

0

StepUp 14 Окт 2019 в 09:43

Как управлять таблицей ngfor, переключаться между двумя массивами

1 ответ

Похожие вопросы

Новые вопросы

arrays