*ngIf display then undisplay - html

Question

I write this after asking that: Observable need a click to load on html page
The solution was good but the problem now is that I have every same id display because precedently I did :
getFeederArray(): Observable<Array<string>> {
let toReturn: Array<string> = [];
var subject = new Subject<Array<string>>();
this.getUser().subscribe(user => {
this.orders = this.db.collection("orders", ref => {
return ref
.where("clientId", "==", user.id)
}).valueChanges({ idField: 'id' }) as Observable<Order[]>;
this.orders.subscribe(orders => {
orders.forEach(order => {
if(toReturn.indexOf(order.feederId) == -1) { <---- to not have twice the same order
toReturn.push(order.feederId);
}
})
})
subject.next(toReturn);
})
return subject.asObservable();
}
And now I have :
getFeederArray(): Observable<string[]> {
return this.getUser().pipe(
switchMap((user) => {
this.orders = this.db
.collection("orders", (ref) => ref.where("clientId", "==", user.id))
.valueChanges({ idField: "id" }) as Observable<Order[]>;
return this.orders;
}),
map((orders) => orders.map((order) => order.feederId))
);
}
Which no need a click no more, so the display is normal, but we can have twice the same order.
So I tried in my html :
<section class="mobile" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px" *ngFor="let id of _feedersId | async">
<div *ngIf="this.isAlreadyDisplayed(id)">
{{ cl(id) }}
<app-feeder-card
[feederId] = "id"
[clientId] = "this.uid"
></app-feeder-card>
</div>
</section>
With those functions in the .ts:
// push in array
pushAlreadyDisplayed(str: string) {
this.alreadyDisplayed.push(str);
}
// boolean already displayed
isAlreadyDisplayed(str: string): boolean {
const bool = this.alreadyDisplayed.includes(str);
if(bool) {
return !bool;
} else {
this.pushAlreadyDisplayed(str);
return !bool;
}
}
cl(str: string) {
console.log(str);
}
But a problem occurs : my page well console.log the ids (and that's good, there is no twice the same), but this part in the HTML :
{{ cl(id) }}
<app-feeder-card
[feederId] = "id"
[clientId] = "this.uid"
></app-feeder-card>
is only showed for less than 1 second and than disapear...
I don't understand why, and so I don't know how to solve my problem...
Thank you for your time

Answer 1

Well, when you use pushAlreadyDisplayed() you make changes to alreadyDisplayed.
This thing cus to re-render the component, and on the 2nd iteration the ID is
marked as arealy renderd aleady.
A better solution is to reduce the array from the duplicates