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

Question

我有一个链接数组，每个元素都是一个包含少量字符串的对象——一个链接、描述和类别。我有显示链接的不同组件，我希望在每个组件中只显示其类别的链接。 所以我想按类别过滤数组。

我有一个包含所有链接的模型数组。

我尝试在没有管道的情况下过滤对象数组。原因：https://angular.io/guide/pipes#appendix-no-filterpipe-or-orderbypipe

显然 Angular 团队建议在组件级别进行过滤，而不是使用管道： “Angular 团队和许多经验丰富的 Angular 开发人员强烈建议将过滤和排序逻辑移至组件本身。”

这是我的组件：

@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();   

}

}

首先我从服务中获取大数组：

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

然后我尝试构建一个仅包含相关链接的新数组。过滤器是按类别。但是当我尝试通过推送其类别匹配的元素来构建新数组时 - 它给了我错误：

“DCHlinks”类型上不存在“push”属性。

DCHlinks 是对象 - 这是类：

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

知道如何做这个简单的过滤器吗？ （并且没有管道 - 请参阅上面的原因..）

谢谢！

Answer 1

您需要像 startupsLinks

那样初始化数组

links: DCHlinks[] = [];

或者你可以简单地使用array.filter来获取相关数据

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

Answer 2

我有同样的问题，但我以不同的方式解决。我有对象数组 并希望使用 html 选择选项进行过滤。我给出了过滤对象数组的数据。

`$`






    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>

$

使用 angular 2+,to 8 的代码它工作正常..