在没有管道的情况下过滤Angular4中的对象数组

Question

I have an array of links that each element is an object that contain few strings - a link, description and category. I have different components that display the links, and I want in each component to display only the links of its category. So I want to filter the array by the category.

I have a mock-up array with all the links.

I try to filter the array of objects without a pipe. The reason why: https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

Apparently the Angular team suggests to do the filtering in the component level and not using a pipe: "The Angular team and many experienced Angular developers strongly recommend moving filtering and sorting logic into the component itself."

So here's my component:

@Component({
    selector: 'startups',
    templateUrl: './startups.component.html'
})

export class StartupsComponent implements OnInit {

constructor(private appLinksService: DigitalCoinHubService) { }

title = 'Startups';


links: DCHlinks[]; // create a new array in type of DCHlinks to get the data

startupsLinks: DCHlinks [] = []; // will build the startsups links only 


getLinks(): void {
  this.links = this.appLinksService.getLinks(); // gets the array with the data from the service

  for (let i in this.links)
  {
     if (this.links[i].dchCategory == 'startups' )
     {
         this.startupsLinks[i].push(this.links[i]);
     }

  }

}

ngOnInit() {
    this.getLinks();   

}

}

So first I get the big array from the service:

this.links = this.appLinksService.getLinks();

And then I try to build a new array that will contain only the relevant links. The filter is by the category. But then when I try to build the new array by push the elements which their category matches - it gives me error:

Property 'push' does not exist on type 'DCHlinks'.

DCHlinks is the object - this is the class:

export class DCHlinks {
   dchLink: string;
   dchLinkTitle: string;
   dchLinkDescription: string;
   dchCategory: string;
 }

Any idea how to do this simple filter? (and w/o pipe - see above reason why..)

Thanks!

Answer 1

You need to intialize the array as you did for startupsLinks

links: DCHlinks[] = [];

Or you can simply use array.filter to get the relavant data

this.startupsLinks = this.links.filter(t=>t.dchCategory == 'startups');

Answer 2

I have the same issue but I resolve in different way. I have the Array of object and want to use filtering using of html select option .which I given the data that filter the array of object.

`$`





  
 
  
  
 
   
 
    
    heroes = [{
        name: "shubh",
        franchise: "eng"
      },
      {
        name: "Ironman",
        franchise: "Marvel"
      },
      {
        name: "Batman",
        franchise: "DC"
      },
      {
        name: "Batman",
        franchise: "DC"
      },
      {
        name: "Batman",
        franchise: "DC"
      },
      {
        name: "satman",
        franchise: "mc"
      },
      {
        name: "monmam",
        franchise: "DC"
      },
      {
        name: "loolman",
        franchise: "DC"
      },
      {
        name: "Thor",
        franchise: "Marvel"
      },
      {
        name: "monmam",
        franchise: "DC"
      },
      {
        name: "monmam",
        franchise: "DC"
      },
      {
        name: "monmam",
        franchise: "DC"
      },

      {
        name: "Thor",
        franchise: "Marvel"
      },
      {
        name: "Superman",
        franchise: "DC"
      },
      {
        name: "Superman",
        franchise: "DC"
      },
      {
        name: "Superman",
        franchise: "DC"
      },
      {
        name: "Superman",
        franchise: "DC"
      },

    ];
    //this is the most imp part in the filter section .I face lot of problem this is not working if this line not write .The filter method works old one time.
    newarr = this.heroes;

    //So I create new array which store the old array value every  time. and we replace the value in the filter function.
    filter(heroes: string) {
      console.log(heroes);
      this.heroes = this.newarr; // replace the value and store old value
      let heroesnew = this.heroes.filter((data => data.name == heroes));

      this.heroes = heroesnew;
      console.log(this.heroes);

    }
 
    
    <!––"#sel" is the template variable which gives the data of value property in option field ––>
    <select #sel class="custom-select custom-select-sm" (change)="filter(sel.value)">
      <option>All</option>
      <option value="Batman">Batman</option>
      <option value="Superman">Superman</option>
      <option value="satman">satman</option>
      <option value="monmam">monmam</option>
      <option value="Thor">thor</option>
    </select>

    <!–– this is the table that I want to filter––>
   <div>
      <table class="table table-hover ">
        <thead class="thead-dark">
          <tr>
            <th>#</th>
            <th>name</th>
            <th>franchise</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let incidence of heroes">
            <td>{{ incidence.name}}</td>
            <td> {{ incidence.franchise }}</td>
          </tr>
        </tbody>
      </table>
    </div>
 
   
 
  

$

use the code for angular 2+,to 8 It working fine ..