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 select选项进行过滤。我给出了过滤对象数组的数据。

`$`






    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>

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

将代码用于2+，角度为8，可以正常工作..

在没有管道

2 个答案: