我只想在Angular中列出博客的类别。当我使用ngFor时，它显示了一个类别列表，但引入了一些重复的类别，就像它引入了所有博客，而不仅仅是其中一些共享的类别一样。希望我对这个问题很清楚。
这是我的html:
<aside class="categories">
<h2 class="aside-title">Categorias</h2>
<ul *ngFor="let data of datas; index as i">
<li class="nav-elipse-blue"><a [routerLink]="['/pagina',datas.category]" title="Blog CSS
articles">{{ data.category.name }}</a></li>
</ul>
</aside>
看起来您需要从数组中删除重复项。
根据这个答案，你可以这样做：
const uniqueCategorias = datas.filter((value, index) => {
const _value = JSON.stringify(value);
return index === obj.arr.findIndex(obj => {
return JSON.stringify(obj) === _value;
});
});
并使用它：
<ul *ngFor="let data of uniqueCategorias; index as i">
<li class="nav-elipse-blue"><a [routerLink]="['/pagina',datas.category]" title="Blog CSS
articles">{{ data.category.name }}</a></li>
</ul>
和在TypeScript文件中：
uniqueCategorias;
getUniqueCategorias(){
uniqueCategorias = datas.filter((value, index) => {
const _value = JSON.stringify(value);
return index === obj.arr.findIndex(obj => {
return JSON.stringify(obj) === _value;
});
});
}
一种方法是为类创建一个单独的categories变量，或者可以直接从数据库中提取类别列表。为了获得唯一的类别，你可以使用JS的"设置"；过滤出唯一项目的数据结构：uniqueCategories = new Set(data.map(item => item.category.name))
角度：
@Component({
selector: 'component'
templateUrl: 'component.html'
})
export class Component {
data = ....
uniqueCategories = new Set(this.data.map(item => item.category.name))
}
HTML
<ul *ngFor="let category of uniqueCategories">
<li>{{category}}</li>
</ul>
您必须首先从数组中删除重复项，然后使用*ngFor。
您可以通过不同的方式删除重复项：
-
使用设置
let data = ['A', 'B', 'A', 'C', 'B']; let uniqueData = [...new Set(data)]; -
使用用于Each((和include((/em>:
let data = ['A', 'B', 'A', 'C', 'B']; let uniqueData = []; data.forEach((c) => { if (!uniqueData.includes(c)) { uniqueData.push(c); } });
还有其他方法，但这些方法更容易理解。
之后在HTML中
<ul *ngFor="let data of uniqueData">
<li>{{category}}</li>
</ul>
myCategories(datas: any){
let newArr = [];
let uniqueArray:any;
datas.forEach((item, index) => {
newArr.push(item.category.name);
uniqueArray = newArr.filter(function(item, pos, self) {
return self.indexOf(item)===pos;
})
});
return uniqueArray;
}