ngFor Angular 5中的长度 [英] ngFor length in Angular 5
本文介绍了ngFor Angular 5中的长度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有三个按钮:
全部(真实+虚假),真实(总数),虚假(总数)
All (Reals+ Fakes), Reals(total count), Fakes(total count)
我正在尝试获取所有Feed中的总数,该总数将显示在全部"中.
I am trying to get the total count of my total feeds which will be shown in All.
feed.feed_type!=的总计数将显示为实数.
And the total count of feed.feed_type != '' which will be shown Reals.
以及feed.feed_type ==''的总数将显示为伪造.
And the total count of feed.feed_type == '' which will be shown Fakes.
订阅模型
export class Feeds {
feed_id: string;
feed_category: string;
feed_title: any;
feed_description: string;
feed_terms: string;
feed_type: string;
checked: false;
}
Feed组件:
import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
import { MyService } from '../shared/services/my-service.service';
import { FeedsService } from '../shared/services/feeds.service';
import { Feeds } from '../shared/services/feeds';
import { Feed } from '../shared/services/feed';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-feeds',
templateUrl: './feeds.component.html',
styleUrls: ['./feeds.component.scss']
})
export class FeedsComponent implements OnInit {
feeds: Observable<Feed[]>;
Reals: boolean;
Fakes: boolean;
selectedFeedType = '';
constructor(private myService: MyService, private feedsService: FeedsService) {
this.selectedFeedType = 'All';
this.Reals = true;
this.Fakes = true;
}
ngOnInit() {
this.feeds = this.myService.feeds;
this.myService.loadAll();
}
SelectedFeedsType(event: any) {
this.selectedFeedType = event.target.value;
if (this.selectedFeedType === 'All') {
this.Reals = true;
this.Fakes = true;
} else if (this.selectedFeedType === 'Reals') {
this.Reals = true;
this.Fakes = false;
} else if (this.selectedFeedType === 'Fakes') {
this.Reals = false;
this.Fakes = true;
}
}
}
我的服务:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { environment } from '../../../environments/environment';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { FeedsService } from './feeds.service';
import { Feed } from './Feed';
@Injectable()
export class MyService {
feeds: Observable<Feed[]>;
private _feeds: BehaviorSubject<Feed[]>;
private baseUrl: string;
total = '';
private dataStore: {
feeds: any
};
constructor(private http: HttpClient) {
this.baseUrl = environment.API_ENDPOINT + 'feeds';
this.dataStore = { feeds: [] };
this._feeds = <BehaviorSubject<Feed[]>>new BehaviorSubject([]);
this.feeds = this._feeds.asObservable();
}
loadAll() {
this.http.get(this.baseUrl).subscribe(feeds => {
this.dataStore.feeds = feeds;
console.log(feeds.length);
const Reals = feeds.filter(feed => feed.feed_type !== '').length;
console.log(Reals);
const Fakes = feeds.length - Reals;
console.log(Fakes);
this._feeds.next(Object.assign({}, this.dataStore).feeds);},
error => console.log('Could not load feeds.'));
}
change(feeds) {
this._feeds.next(feeds);
}
}
Feeds.Component.html
<ul>
<li><input type="radio" name="feedType" value="All" checked (change)="SelectedFeedsType($event)">All</li>
<li><input type="radio" name="feedType" value="Reals" (change)="SelectedFeedsType($event)">Reals</li>
<li><input type="radio" name="feedType" value="Fakes" (change)="SelectedFeedsType($event)">Fakes</li>
</ul>
<table class="table table-bordered">
<thead>
<tr><th>Feeds</th></tr>
</thead>
<tbody>
<tr><td>
<div class="storetabContent" *ngFor="let feed of feeds | async">
<ng-container *ngIf="Reals && feed.feed_type != ''">
<p>{{ feed.feed_title }}</p>
<p>{{ feed.feed_category }}</p>
<b>REAL</b>
</ng-container>
<ng-container *ngIf="Fakes && feed.feed_type == ''">
<p>{{ feed.feed_title }}</p>
<p>{{ feed.feed_category }}</p>
<b>FAKE</b>
</ng-container>
</div>
</td></tr>
</tbody>
</table>
任何建议,请帮助.
推荐答案
根据您的评论,要检索Feed_A
和Feed_B
的计数,可以使用 Array#length
:
As per your comments, to retrieve the count of Feed_A
and Feed_B
, you can make use of Array#filter
and Array#length
:
const feedACount = feeds.filter(feed => feed.feed_type !== '').length;
const feedBCount = feeds.length - feedACount;
这篇关于ngFor Angular 5中的长度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文