Mes amis, je suis en train d’apprendre par l’exercice Angular 6 & 7, et j’ai rencontré ce problème à plusieurs reprises.
Imaginez que j'ai une classe/interface/type - par exemple. Person
- avec quelques propriétés, qui sont renvoyées par un appel d'API Web - quelque chose comme ceci:
export interface Person {
FirstName: string;
LastName: string;
JobTitle: string;
// so other properties - not relevant to this question
}
Ce que j'aimerais pouvoir faire, c’est d’afficher le nom complet (par exemple, "Prénom + [Espace] + Nom"), par exemple. un Angular grid (AG-Grid) ou un autre endroit - où je ne peux pas utiliser une expression concat ou quoi que ce soit, mais je dois faire référence à une propriété unique de la classe/interface/type.
En C #, je créerais simplement une propriété
string FullName { get { return $"{FirstName} {LastName}"; } }
et en finir avec cela - mais comment puis-je faire cela en dactylographie? D'après ce que j'ai lu et recherché, cela semble être non pris en charge - vraiment?!? !!? Comment cela peut-il être ??? Cela ressemble à une opération aussi simple et souvent utilisée - quelle est la raison pour laquelle cela n’existe pas en dactylographie? Ou existe-t-il - et je n'ai tout simplement pas trouvé le moyen de faire cela dans TS?
S'il s'agit d'une interface, il n'y a pas de syntaxe car toutes les propriétés de JavaScript peuvent avoir des fonctions getter/setter au lieu d'être des champs exposés. C'est un problème de mise en œuvre.
Les membres BTW dans TypeScript utilisent camelCase
:
export interface Person {
firstName: string;
lastName : string;
jobTitle : string;
fullName : string;
}
class SimplePerson implements Person {
// ...
get fullName(): string {
return this.firstName + " " + this.lastName;
}
}
Vous pouvez également définir get
ters et set
ters en JavaScript.
Essayez ceci dans votre classe de composant:
person: Person;
...
// You got the person Object from your Backend API.
...
// Now
get fullName() {
return `${this.person.firstName} ${this.person.lastName}`;
}
Et ensuite dans votre modèle:
Utilisez simplement fullName
comme ceci:
<p>{{ fullName }}</p>
Javascript prend en charge get
et set
lors de la définition d'une propriété (principalement à l'aide de Object.defineProperty
).
Apparemment, il existe une syntaxe pratique pour cela dans TypeScript (pour les classes):
class MyClass{
firstName: string;
lastName: string;
constructor(firstName: string, lastName: string){
this.firstName = firstName;
this.lastName = lastName;
}
get fullName(){
return `${this.firstName} ${this.lastName}`;
}
}
En ce qui concerne les interfaces, je ne suis pas sûr que cela soit possible car leur seul objectif est de décrire les données et non de les implémenter.
Pourrait essayer d'utiliser un tableau de chaîne;
var fullName: Array<string> = Array<string>();
var firstName: string = 'Bob';
var lastName: string = 'Boberanne';
fullName.Push(firstName);
fullName.Push(lastName);
En html:
<p>{{fullName.join(' ')}}</p>
<p>{{[fistname, lastName].join(' ')}}</p>
Dans TypeScript:
fullName.join(' ');
[firstName, lastName].join(' ');