typescript 在没有管道的情况下过滤Angular4中的对象数组
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47493083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filter array of objects in Angular4 without pipe
提问by Menahem Gil
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
我尝试在没有管道的情况下过滤对象数组。原因：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."
显然 Angular 团队建议在组件级别进行过滤而不是使用管道：“Angular 团队和许多经验丰富的 Angular 开发人员强烈建议将过滤和排序逻辑移到组件本身中。”
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”类型不存在“push”属性。
DCHlinks is the object - this is the class:
DCHlinks 是对象 - 这是类：
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!
谢谢！
回答by Sajeetharan
You need to intialize the array as you did for startupsLinks
您需要像之前一样初始化数组 startupsLinks
links: DCHlinks[] = [];
Or you can simply use array.filter to get the relavant data
或者你可以简单地使用 array.filter 来获取相关数据
this.startupsLinks = this.links.filter(t=>t.dchCategory == 'startups');
回答by Narendra Maurya
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.
我有同样的问题，但我以不同的方式解决。我有对象数组，并希望使用 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>
$
$
use the code for angular 2+,to 8 It working fine ..
使用角度 2+ 到 8 的代码它工作正常..
