ngFor Angular 5 中的长度 [英] ngFor length in Angular 5

问题描述

我有三个按钮:

全部(Reals+ Fakes)、Reals(总计数)、Fakes(总计数)

我正在尝试获取将在全部"中显示的总 Feed 的总数.

以及将显示为 Reals 的 feed.feed_type != '' 的总数.

以及将显示 Fakes 的 feed.feed_type == '' 的总数.

Feed 模型

export class Feeds {feed_id:字符串；feed_category: 字符串；feed_title: 任何;feed_description:字符串；feed_terms:字符串；feed_type:字符串；检查:假；}

Feed 组件:

import { Component, OnInit } from '@angular/core';从'../../environments/environment'导入{环境}；从'../shared/services/my-service.service'导入{我的服务}；从'../shared/services/feeds.service'导入{FeedsService}；从'../shared/services/feeds'导入{Feeds}；从'../shared/services/feed'导入{Feed}；从 'rxjs/Observable' 导入 { Observable };@成分({选择器:'app-feeds'，templateUrl: './feeds.component.html',styleUrls: ['./feeds.component.scss']})导出类 FeedsComponent 实现 OnInit {feeds: Observable;实数:布尔值；假货:布尔值；selectedFeedType = '';构造函数(私有 myService:MyService，私有 feedsService:FeedsService){this.selectedFeedType = '全部';this.Reals = true;this.Fakes = true;}ngOnInit() {this.feeds = this.myService.feeds;this.myService.loadAll();}SelectedFeedsType(事件:任何){this.selectedFeedType = event.target.value;如果(this.selectedFeedType === '全部'){this.Reals = true;this.Fakes = true;} else if (this.selectedFeedType === 'Reals') {this.Reals = true;this.Fakes = false;} else if (this.selectedFeedType === '假货') {this.Reals = false;this.Fakes = true;}}}

我的服务:

import { Injectable } from '@angular/core';从 'rxjs/Observable' 导入 { Observable };从rxjs/主题"导入{主题}；从'rxjs/BehaviorSubject'导入{BehaviorSubject}；从'../../../environments/environment'导入{环境}；从@angular/common/http"导入 { HttpClient, HttpHeaders };从'./feeds.service'导入{FeedsService}；从'./Feed'导入{Feed}；@Injectable()导出类 MyService {feeds: Observable;私人 _feeds: BehaviorSubject;私有 baseUrl:字符串；总计 = '';私有数据存储:{饲料:任何};构造函数(私有 http:HttpClient){this.baseUrl = environment.API_ENDPOINT + 'feeds';this.dataStore = { feeds: [] };this._feeds = >new BehaviorSubject([]);this.feeds = this._feeds.asObservable();}加载所有(){this.http.get(this.baseUrl).subscribe(feeds => {this.dataStore.feeds = feeds;控制台.日志(饲料.长度)；const Reals = feeds.filter(feed => feed.feed_type !== '').length;控制台日志(实数)；const Fakes = feeds.length - Reals;控制台日志(假货)；this._feeds.next(Object.assign({}, this.dataStore).feeds);},错误 =>console.log('无法加载提要.'));}改变(饲料){this._feeds.next(feeds);}}

Feeds.Component.html

<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>
<table class="table table-bordered"><头><tr><th>Feeds</th></tr></thead><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>真实</b></ng-容器><ng-container *ngIf="Fakes && feed.feed_type == ''"><p>{{ feed.feed_title }}</p><p>{{ feed.feed_category }}</p><b>假货</b></ng-容器>

</td></tr></tbody></table>

任何建议，感谢帮助.

解决方案

根据您的评论，要检索Feed_A 和Feed_B 的计数，您可以使用Array#filter 和 Array#长度:

const feedACount = feeds.filter(feed => feed.feed_type !== '').length;const feedBCount = feeds.length - feedACount;

I have three buttons :

All (Reals+ Fakes), Reals(total count), Fakes(total count)

I am trying to get the total count of my total feeds which will be shown in All.

And the total count of feed.feed_type != '' which will be shown Reals.

And the total count of feed.feed_type == '' which will be shown Fakes.

Feeds Model

export class Feeds {
  feed_id: string;
  feed_category: string;
  feed_title: any;
  feed_description: string;
  feed_terms: string;
  feed_type: string;
  checked: false;
  }

Feeds Component:

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

}

MyService:

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>

Any suggestions, help appreciated.

解决方案

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屋！