J'ai une situation où j'ai besoin de pousser la réponse d'une API appelée à un tableau. Auparavant, j'avais codé en dur les données comme ceci.
export class AddGroupComponent implements OnInit {
filterrole: Role [];
ngOnInit() {
this.getDistinctRole();
}
getDistinctRole(): void {
this._dashboardservice.getDistinctRole().subscribe(
resp => {
// what should i do here to push the data into
// filterdata.text and filterdata.value
},
err => {
this.loading = false;
this._nzMessage.create('error', `Error occurred: ${err.message}`);
}
);
}
Mais maintenant, j'ai besoin d'obtenir les données du backend. La requête backend est très bien. voici à quoi ressemble le résultat du backend appelé.
export class Role {
text: string;
value: string;
}
le rôle de filtre a sa propre classe qui se compose de texte et de variable de valeur.
Role.class
["Supervisor","Maintainer","Observer","Administrator"]
Ma question est la suivante: comment envoyer la réponse de l'appel d'API dans la variable filterrole? Voici mon workaroud.
filterrole = [
{ text: 'Supervisor', value: 'Supervisor' },
{ text: 'Administrator', value: 'Administrator'},
{ text: 'Maintainer', value: 'Maintainer' }
];
3 Réponses :
Faites-le simplement comme ceci
resp => {
resp.forEach(x => this.filterrole.push(new Role(x,x)) );
},
et changez la classe Role en une interface
resp => {
this.filterrole = resp.map(x => new Role(x,x));
},
Ou si vous voulez toujours l'avoir en tant que classe, créez un constructeur
export class Role {
constructor(public value: string, public text: string)
}
puis
export interface Role {
text: string;
value: string;
}
ou si vous voulez simplement muter le tableau sans réassigner:
resp => {
this.filterrole = resp.map(x => ( {text: x, value: x } ))
},
mais dans ce cas, n'oubliez pas d'initaliser le rôle de filtre quelque part.
Merci beaucoup pour l'effort, monsieur. Je l'apprécie vraiment .. Je suis vraiment nouveau dans cette angulaire et dactylographiée. ce genre d'exemple m'aide vraiment à mieux comprendre.
Vous pouvez envoyer la réponse de l'API avec le code ci-dessous. faites-moi savoir si vous avez rencontré des difficultés pour l'attribuer.
`resp => {
// what should i do here to push the data into
// filterdata.text and filterdata.value
for (i in resp.data) {
filterrole.push(resp[i]);
}
}`
vous pouvez également faire comme ceci
export class AddGroupComponent implements OnInit {
filterrole = [];
ngOnInit() {
this.getDistinctRole();
}
getDistinctRole(): void {
this._dashboardservice.getDistinctRole().subscribe(
resp => {
this.fliterRole(resp);
},
err => {
this.loading = false;
this._nzMessage.create('error', `Error occurred: ${err.message}`);
}
);
filterRole(result) {
for(let i =0; i < result.length; i++) {
this.filterrole.push({ text: result[i], value: result[i] });
}
}
ceci est un exemple fonctionnel https://codesandbox.io/s/525xw2097n
Pourriez-vous s'il vous plaît expliquer cet extrait de code en détail? Cela peut aider les autres qui veulent savoir en quoi cet extrait de code est différent de l'extrait de code publié par OP ou ceux qui veulent savoir ce que fait réellement le code.
@Edric merci pour votre suggestion J'ai ajouté un code de travail veuillez vérifier que
Pourquoi avez-vous besoin de propriétés distinctes pour la même valeur (selon le premier extrait de code)?
@Edric a probablement besoin d'un contrôle tiers (combobox?) Dans ce format.
@Edric salut edric. le premier extrait de code est la partie codée en dur. Maintenant, j'ai besoin d'obtenir la valeur de l'appel API qui lit les données de la base de données.