The same is shown only once in angular ngFor array

there is an array like this

[
 {
    id:1,
    info: {name:"abc"}
    show: true
 },
{
    id:2,
    info: {name:"abc"}
    show: true
 },
{
    id:3,
    info: {name:"qq"}
    show: true
 }
]



<!-- HTML -->
<ng-container *ngFor="let tests of test;>
    {{oddsTable.id}}
    {{oddsTable.info.name}}
</ng-container>


then I hope that when I ngFor, the same info.name will only be displayed once. Do not repeat it. How can this be achieved?

finally shows, as follows:
1 abc
2
3 qq

Mar.15,2022

preprocess the data, or use the sibling seletor of the stylesheet to implement


I don't know much about angular. I remember that there is a custom pipeline that can handle this logic, or process the data


data before the loop. Unless the two data with the same name must be antecedent, then Filter can be dropped by judgment.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e5ad1b-455fc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e5ad1b-455fc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?