如何仅显示数据中的唯一值而不是全部[关闭]答案

【问题标题】：How to show only unique values from data instead of all [closed]如何仅显示数据中的唯一值而不是全部[关闭]
【发布时间】：2021-04-01 04:34:19
【问题描述】：

我只想在 div 中显示唯一值而不是全部。

<div *ngFor="let user of allUser">
{{user.gender}}
</div>

但现在，它正在根据屏幕截图填充所有值

我需要做哪些更改才能在此处仅显示唯一值？ 它应该显示 2 个值：男性和女性。

【问题讨论】：

【解决方案1】：

在 ts 文件中创建一个 getter（名称可以是任何东西）。

get uniqueGenders(){
    return new Set(this.allUser.map(x=>x.gender))
}

在模板中使用

<div *ngFor="let item of uniqueGenders">
  {{item}}
</div>

阅读更多关于 getter 和 setter here

【讨论】：

它抛出一个错误说ERROR TypeError: Cannot read property 'map' of undefined
您如何获得allUser 数据？请分享代码
或勾选get uniqueGenders(){ return this.allUser? new Set(this.allUser.map(x=>x.gender)): [] }

【解决方案2】：

我猜它们存储在一个数组中..？您可以使用该集合（如 yazan 所述）

让 ngFor=['male', 'male', 'female', 'male', 'female']

让性别 = [...new Set(ngFor)]

【讨论】：