web-dev-qa-db-fra.com

comment déclarer correctement et simplement un objet dans Angular2

J'essaie de déclarer un objet et de définir les valeurs par défaut dans mon application ionic 2, mais je ne comprends pas encore très bien TypeScript et angular2.

J'ai fait ça:

@Component({
    selector: 'page-weightlevel'
    , templateUrl: 'weightlevel.html'
})
export class WeightlevelPage {

    name: string;
    firstNavParam: boolean;
    data = any;
    data.shareoptions: ['Facebook', 'Twitter', 'Email'];
    data.techniqueText: string;
    data.frequScaleWording: string[];
    data.fitnessWording: string[];
    data.levelName: string[];

    constructor(
        public navCtrl: NavController,
        ....

et j'obtiens cette erreur:

TypeScript Error
';' expected.
src/pages/weightlevel/weightlevel.ts
data.shareoptions: ['Facebook', 'Twitter', 'Email'];

le point entre data et shareoptions n'est apparemment pas le bienvenu.

Pouvez-vous aider s'il vous plaît ?

angularionic2
4
Louis

La façon de déclarer/initialiser un objet dans TypeScript est, comme son nom l’indique, en tapant vos données. Vous pouvez utiliser any, mais cela défie simplement le but de TypeScript. Au lieu de cela, créez un modèle avec les propriétés souhaitées et déclarant ainsi un objet vide serait:

data: MyType = <MyType>{};

Ce que vous essayez maintenant de faire est d’affecter des données à votre objet. Pour cela, utilisez =

ngOnInit() {
  this.data.shareOptions = ['Facebook', 'Twitter', 'Email']
}

Comme indiqué dans les commentaires, vous pouvez naturellement déclarer le tableau à l'intérieur de l'objet dans le composant comme suit:

data = <MyType>{shareOptions:['Facebook','Twitter','Email']};

Rappelez-vous cependant, même avec la déclaration d'un type, par exemple interface, celui-ci n'existe pas au moment de l'exécution. La saisie est uniquement destinée au compilateur pour vous aider et vous indiquer lorsque vous essayez d'affecter des valeurs ou des propriétés qui n'existent pas dans votre modèle. Vous pouvez donc remplacer tous les modèles et votre application s'exécutera sans erreur.

Mais faites tapez vos données et évitez d’utiliser any!

10
AJT_82

Dans le cas où une classe de modèle est déjà créée 

    let car = <ICar>{};
    car.Name= "Audi";
    car.Model = "A4";
    car.category = "German";
2
Charlie

dans mon expérience, j'ai créé l'objet de la manière suivante. mais j'ai eu des erreurs quand j'ai couru construire le script dans la forme angulaire 5.2. alors j'ai utilisé la deuxième manière.

fausse Route:

 data = {};

la bonne façon:

 data:any = {};
2
Kumaresan Perumal

Vous devez d’abord créer une nouvelle classe dans votre fichier de modèle. s'il n'y a pas de fichier de modèle, créez-en un nouveau. puis créez une classe avec des propriétés comme ci-dessous.

Class Data{

 shareoptions: [];
 techniqueText: string;
 frequScaleWording: [];
 fitnessWording: [];
 levelName: [];
}

Puis en utilisant cette classe créer un nouvel objet dans votre composant 

@Component({
    selector: 'page-weightlevel'
    , templateUrl: 'weightlevel.html'
})
export class WeightlevelPage {

    name: string;
    firstNavParam: boolean;


    constructor(
        public navCtrl: NavController,
     data = new Data();
    data.shareoptions = ['Facebook', 'Twitter', 'Email'];
        ....

PS

Après: mark, vous pouvez affecter un type de données. ['Facebook', 'Twitter', 'Email'] n'est pas un type de données. Si vous avez besoin d’affecter des données à un tableau, veuillez utiliser = mark. si vous avez besoin d'attribuer une valeur à array, veuillez le faire à l'intérieur du constructeur

 data.shareoptions = ['Facebook', 'Twitter', 'Email'];

Édité:

Après: mark, vous pouvez affecter un type de données. ['Facebook', 'Twitter', 'Email'] n'est pas un type de données. Si vous avez besoin d’affecter des données à un tableau, veuillez utiliser = mark. si vous avez besoin d'attribuer une valeur à array, veuillez le faire à l'intérieur du constructeur

@Component({
    selector: 'page-weightlevel'
    , templateUrl: 'weightlevel.html'
})
export class WeightlevelPage {

    name: string;
    firstNavParam: boolean;
    data = any;
    data.shareoptions:any;
    data.techniqueText: string;
    data.frequScaleWording: string[];
    data.fitnessWording: string[];
    data.levelName: string[];

    constructor(
        public navCtrl: NavController,
        data.shareoptions= ['Facebook', 'Twitter', 'Email'];
0
Krishan

Je ne comprends pas les solutions interface et elles ont été déclassées. Je suis donc allé avec ceci:

@Component({
    selector: 'page-weightlevel'
    , templateUrl: 'weightlevel.html'
})
export class WeightlevelPage {

name: string;
firstNavParam: boolean;
data = any;
data.shareoptions: ['Facebook', 'Twitter', 'Email'];
data.techniqueText: string;
data.frequScaleWording: string[];
data.fitnessWording: string[];
data.levelName: string[];

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private storageService: LocalStorageService
    , public globalVars: GlobalVars
) {

    this.globalVars.addGlobalVar("isWebIntegration", false);

    this.data.shareoptions = ['Facebook', 'Twitter', 'Email'];

et cela semble fonctionner.

0
Louis