在Angular 2

Question

我正在使用Angular 2为我的投资组合开发一个应用程序，我通过复选框进行过滤功能。这些复选框将名称过滤应用于我用过的每个项目的技术列表。在应用程序中，我也有类似的功能，允许您指示您喜欢的项目。对于这个应用程序，我需要跟踪每个项目收到的喜欢的数量。在我的代码中，我想在我的项目组件中添加一项服务，这样我就可以在使用路由器切换视图时不会丢失喜欢和过滤项目的数量。在我的代码中，我有一个Project对象数组，每个对象采用以下形式 - new Project( "Web Design Business Website", ["Wordpress", "Bootstrap","PHP","HTML5","CSS3"], 0 )如果我不使用服务，我可以使用过滤和优惠功能，但我需要使用一个出于上述原因，当我尝试导入我的服务并使用它时，我无法在屏幕上看到我的模板html，我收到以下错误 -

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0 ORIGINAL EXCEPTION: TypeError: Cannot read property 'filter' of undefined

ERROR CONTEXT: [object Object]

我的项目组件代码如下：

import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { Component,  OnInit }       from '@angular/core';
import { Project }   from './project';
import { ProjectService } from './project.service';




@Component({
  selector: 'my-app',
  host: {class: 'dashboard'},
  templateUrl: 'app/app.component.html',
  providers: [ProjectService]

})



export class ProjectsComponent implements OnInit {

  allProjects: Project[];

  constructor(private projectService: ProjectService) {
        this.updateSelectedList();
  }

  getProjects(){
    this.allProjects = this.projectService.getProjects();
  }

  ngOnInit(){
    this.getProjects();
  }


  title: string = 'Filter Projects by Technology';

  /* all possible tech */
  technologyList : Array<any> = [
    { 
      name:"Javascript",
      checked: true
    }, {
      name: "PHP",
      checked: true
    }, {
      name: "HTML5",
      checked: true
    }, {
      name: "CSS3",
      checked: true
    }, {
      name: "AngularJS",
      checked: true
    }, {
      name: "BackboneJS",
      checked: true
    }, {
      name: "KnockoutJS",
      checked: true
    }, {
      name: "Bootstrap",
      checked: true
    }, {
      name: "Wordpress",
      checked: true
    },
    {
      name: "Photoshop",
      checked: true
    }
  ];

  /* projects that match the selected tech */
  matchedProjects: Array<any> = []

  /* The checked items in the list */
  selectedTechnology: Array<string> = [];

  favUp(project): boolean {
          project.favUp();
          return false;
  }






  onInteractionEvent(event: Event) {
    var item = this.technologyList.find(
      (val) => val.name === event.target.value
    );

    item.checked = !item.checked;
    this.updateSelectedList();
  }

  updateSelectedList() {
    let checkedNames = 
        this.technologyList.filter( (val) => val.checked === true).map(n => n.name);  


    this.matchedProjects = this.allProjects.filter(project => {
        return this.containsAny(project.technologies, checkedNames)
    });


  }


  containsAny(arr1, arr2) {
    for(var i in arr1) {   
        if(arr2.indexOf( arr1[i] ) > -1){
            return true;
        }
    }
    return false;
};



}

我的项目类位于我导入的另一个文件中，如下所示：

export class Project {
  name: string;
  technologies: Array<any>;
  favs: number;

  constructor(name: string, technologies: Array<any>, favs: number) {
    this.name = name;
    this.technologies = technologies;
    this.favs = favs || 0;
  }

  favUp(): void {
    this.favs += 1;
  }

}

我的项目对象数组位于另一个文件中，如下所示：

import { Project } from './project';

 /* all the projects worked on */
export var ALLPROJECTS: Project[] = [
          new Project( "Web Design Business Website", ["Wordpress", "Bootstrap","PHP","HTML5","CSS3"], 0 ),
          new Project( "Vocab Immersion Trainer App", ["AngularJS","Javascript","Bootstrap","HTML5","CSS3"], 0)
        ];

我的项目服务位于我导入的另一个文件中，如下所示：

import { Injectable } from '@angular/core';
import { ALLPROJECTS } from './all-projects';

@Injectable()
export class ProjectService {
  getProjects() {
    return ALLPROJECTS;
  }
}

项目组件的模板html如下：

  <p>
    <a class="btn btn-large btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      {{title}}
    </a>
  </p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
     <label *ngFor="let item of technologyList">
        <input type="checkbox" 
             value="{{item.name}}" 
             [checked]="item.checked" 
             (change)="onInteractionEvent($event)">
      {{ item.name }}
      </label>
  </div>
</div>    

    <h2>Featured Projects</h2>
  <div *ngFor="let project of matchedProjects" class="container">
    <div class="row">
      <div class="col-sm-4 col-sm-offset-1 card">
        <img src="http://placehold.it/350x150" class="card-img-top img-fluid img-rounded center-block" data-src="..." alt="Card image cap">
          <div class="card-block  text-xs-center">
          <h4 class="card-title">Project Name: {{project.name}} </h4>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. This is alot of text. It adds length to the paragraph. It adds bulk. I had to do it. It was very necessary for this example</p>
          <a class="btn btn-primary">See live site</a>
          </div>
          <p> {{ project.favs }} Likes <a href (click)="favUp(project)">Like</a></p>
      </div>
      <div class="col-sm-6 text-xs-center">
        <h2 >Technology used</h2>
        <p>{{project.technologies}}</p>
      </div>
    </div>
  </div>

我以前的项目组件代码有效，但不会在视图之间保留数据，如下所示

import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import { Component }       from '@angular/core';
/* import { Suggestion, SuggestionsComponent, SuggestionsView } from './suggestions.component'; */

export class Project {
  name: string;
  technologies: Array<any>;
  favs: number;

  constructor(name: string, technologies: Array<any>, favs: number) {
    this.name = name;
    this.technologies = technologies;
    this.favs = favs || 0;
  }

  favUp(): void {
    this.favs += 1;
  }

}

@Component({
  selector: 'my-app',
  host: {class: 'dashboard'},
  templateUrl: 'app/projects.component.html'

})



export class ProjectsComponent {

  title: string = 'Filter Projects by Technology';

  /* all possible tech */
  technologyList : Array<any> = [
    { 
      name:"Javascript",
      checked: true
    }, {
      name: "PHP",
      checked: true
    }, {
      name: "HTML5",
      checked: true
    }, {
      name: "CSS3",
      checked: true
    }, {
      name: "AngularJS",
      checked: true
    }, {
      name: "BackboneJS",
      checked: true
    }, {
      name: "KnockoutJS",
      checked: true
    }, {
      name: "Bootstrap",
      checked: true
    }, {
      name: "Wordpress",
      checked: true
    },
    {
      name: "Photoshop",
      checked: true
    }
  ];

  /* all the projects worked on */
        allProjects = [
        new Project( "Web Design Business Website", ["Wordpress", "Bootstrap","PHP","HTML5","CSS3"], 0 ),
        new Project( "Vocab Immersion Trainer App", ["AngularJS","Javascript","Bootstrap","HTML5","CSS3"], 0)
        ];

  /* projects that match the selected tech */
  matchedProjects: Array<any> = []

  /* The checked items in the list */
  selectedTechnology: Array<string> = [];

  favUp(project): boolean {
          project.favUp();
          return false;
  }


  constructor() {
        this.updateSelectedList();
  }

  onInteractionEvent(event: Event) {
    var item = this.technologyList.find(
      (val) => val.name === event.target.value
    );

    item.checked = !item.checked;
    this.updateSelectedList();
  }

  updateSelectedList() {
    let checkedNames = 
        this.technologyList.filter( (val) => val.checked === true).map(n => n.name);  


    this.matchedProjects = this.allProjects.filter(project => {
        return this.containsAny(project.technologies, checkedNames)
    });


  }


  containsAny(arr1, arr2) {
    for(var i in arr1) {   
        if(arr2.indexOf( arr1[i] ) > -1){
            return true;
        }
    }
    return false;
};



}

以下是在合并服务之前指向项目工作版本的github链接：Portfolio Application link