Dans cette option de tapis, j'essaye d'afficher les données d'un observable auquel je suis abonné.
public filterCity() {
var parameters = new CitySearchParameters(100, 0);
parameters.City = this.city;
this.filteredCustomer = this.customerService.get(parameters);
if (typeof (this.city) == "object") {
var curCity: any = this.city;
this.city = curCity.City;
}
}
Le nom de l'observable est filteredCustomer.
Maintenant, dans l'option mat, j'essaye d'afficher les noms de villes. C'est le résultat.
Los Angeles Boston Detroit Los Angeles Washington Los Angeles
Comme vous pouvez le voir, j'ai des doublons.
Il est possible de supprimer les doublons (comme un distinct dans SQL)?
Mon observable provient de ce fichier ts:
<mat-option *ngFor="let option of (filteredCustomer | async)?.Items"
[value]="option" (onSelectionChange)="searchDest($event)">
{{option.Cityname}}
</mat-option>
Merci
3 Réponses :
L'objet Set vous permet de stocker des valeurs uniques de tout type, qu'il s'agisse de valeurs primitives ou de références d'objet.
Ainsi, vous pouvez convertir la liste, les doublons seront supprimés.
let chars = ['A', 'B', 'A', 'C', 'B'];
let uniqueChars = chars.filter((c, index) => {
return chars.indexOf(c) === index;
});
console.log(uniqueChars); // results = [ 'A', 'B', 'C' ]
une autre approche pour utiliser le filtre
let list = [...new Set(this.filteredCustomer)];
avec la méthode Set, j'ai cette erreur: aucune surcharge ne correspond à cet appel. Surcharge 1 sur 2, '(iterable ?: Iterable <inconnu>): Set <inconnu>', a donné l'erreur suivante. L'argument de type 'Observable <CustomerSearchResult>' n'est pas assignable au paramètre de type 'Iterable <unknown>'. La propriété '[Symbol.iterator]' est manquante dans le type 'Observable <CustomerSearchResult>' mais requise dans le type 'Iterable <unknown>'. Surcharge 2 sur 2, '(valeurs?: Lecture seule n'importe quel []): Définir <any>', a donné l'erreur suivante. L'argument de type 'Observable <CustomerSearchResult>' n'est pas assignable au paramètre de type 'readonly any []'.
wsvincent.com/javascript-remove-duplicates-array/… .
Vous pouvez utiliser l'opérateur de réduction RxJS pour que votre canal asynchrone fonctionne, quelque chose comme ceci, en supposant que vous supprimez les doublons en fonction de la propriété .Cityname
public filterCity() {
var parameters = new CitySearchParameters(100, 0);
parameters.City = this.city;
this.filteredCustomer = this.customerService.get(parameters).pipe(
reduce((list, val) => {
if (!list.length) return [val]
const foundIndex = list.findIndex((item) => item.cityname === val.cityname);
if (foundIndex === -1) {
list.push(val);
}
return list;
}, [])
);
if (typeof(this.city) == "object") {
var curCity: any = this.city;
this.city = curCity.City;
}
}
Vous pouvez utiliser Array#filter avec Array#findIndex pour supprimer les doublons dans un tableau.
public filterCity() {
var parameters = new CitySearchParameters(100, 0);
parameters.City = this.city;
this.filteredCustomer = this.customerService.get(parameters).pipe(
map(customer => ({
...customer,
Items: uniqueArray(customer.Items, 'Cityname') // <-- remove duplicates by `Cityname` property
}))
);
if (typeof (this.city) == "object") {
var curCity: any = this.city;
this.city = curCity.City;
}
}
Vous pouvez ensuite "capturer" l'émission de l'observable dans le contrôleur à l'aide de l'opérateur de map et supprimer les doublons avant de les rendre dans le modèle
// credit: https://stackoverflow.com/a/36744732/6513921
private uniqueArray(target: Array<any>, property: any): Array<any> {
return target.filter((item, index) =>
index === target.findIndex(t =>
t[property] === item[property]
)
);
}
L'opérateur de propagation ... est utilisé pour conserver d'autres propriétés dans l'émission de l'observable, à l'exception du tableau de propriétés Items . Il est modifié pour supprimer les doublons.
Ça fonctionne bien. De cette façon, j'ai une méthode dédiée (celle que vous avez appelée uniqueArray) qui sera utile à l'avenir. Merci beaucoup.
Je ne peux pas voter en raison de ma réputation. Merci beaucoup.
Quelle est l'attente de production? est juste une liste de chaînes?