angular4 typescript Klassen, 3 Methoden, um eine Instanz zu erstellen, Tutorial Held

Question

Ich übe Typoskript mit eckigen, und ich muss sehen, wie man mit 3 verschiedenen Methoden arbeiten, um eine Instanz zu erstellen. Ich habe wie im Beispiel-Eckig-Held-Tutorial die erste Instanz erstellt: held1, aber ich verstehe nicht, dass held2 und held3 funktionieren. Ich versuche, den Namen des Helden 3 auf die Vorlage zu drucken.

der Code:

app.component.js

import { Component } from '@angular/core'; 
export class Hero { 
    id: number; 
    name: string; 
} 
hero: Hero = { 
    id: 1, 
    name: 'Flash' 
} 
@Component({ 
    selector: 'my-app', 
    template: `<h1>{{title}}</h1><h2>Hero1: {{hero.name}} , Hero2: {{hero2.name}} , Hero3: {{hero3.name}}</h2>`, 
}) 
export class AppComponent { 
    public hero2: Hero; 
    public hero3; 

    title = 'Tour of Heros'; 
    ngOnInit() { 
    this.hero2 = { 
     id: 2, 
     name: 'Superman' 
    }; 
    this.hero3 = new (3, 'Spiderman') ; 
    } 
} 

Hier ist der Code gelöst mit 3 Methoden (dank der Antworten):

import { Component } from '@angular/core'; 
export class Hero { 
    id: number; 
    name: string; 
    constructor(id: number, name: string) { 
    this.id = id; 
    this.name = name; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<h1>{{title}}</h1><h2>Hero1: {{hero.name}} , Hero2: {{hero2.name}} , Hero3: {{hero3.name}}</h2>`, 
}) 
export class AppComponent { 
    hero: Hero = { 
    id: 1, 
    name: 'Flash' 
    } 
    title = 'Tour of Heros'; 
    public hero2: Hero; 
    public hero3: Hero; 


    ngOnInit() { 
    this.hero2 = { 
     id: 2, 
     name: 'Superman' 
    }; 
    this.hero3 = new Hero (3, 'Spiderman') ; 
    } 
} 

Answer 1

Was Sie wollen, ist so etwas wie dieses:

import { Component, OnInit } from '@angular/core'; 

export class Hero { 
    id: number; 
    name: string; 

    // This allows you to make the call `new Hero(1, 'Flash')` for example 
    constructor(id: number, name: string) { 
    this.id = id; 
    this.name = name; 
    } 
} 

// Your Hero class could also look like this because TypeScript is awesome 
// export class Hero { 
// constructor(public id: number, public name: string) { } 
// } 

@Component({ 
    selector: 'my-app', 
    template: ` 
<h1>{{title}}</h1> 
<h2> 
    <!-- if you want all of the heroes to appear in 
    the same <h2>...</h2> tag as you had it, this is 
    one way you can do it. `ng-template` ends up not 
    appearing in the DOM --> 
    <ng-template *ngFor="let hero of heroes">Hero{{hero.id}}: {{hero.name}}</ng-template> 
</h2> 

<!-- I'd suggest changing your template to something like this: --> 
    <h1>{{title}}</h1> 
    <h2 *ngFor="let hero of heroes">{{hero.id}}: {{hero.name}}</h2> 
<!-- ... so that each hero gets its own <h2>...</h2> tag --> 
` 
}) 
export class AppComponent implements OnInit { 
    heroes: Hero[]; // A bucket-o-heroes (array, rather) that can grow and shrink in size as you see fit. 
    title = 'Tour of Heros'; 

    // This gets called when the component is initialized 
    ngOnInit() { 
    // This populates the public property of the AppComponent that is an array of Heroes 
    this.heroes = [ 
     new Hero(1, 'Flash'), 
     new Hero(2, 'Superman'), 
     new Hero(3, 'Spiderman') 
    ] 
    } 
} 

Sie sollten ein Array verwenden, damit Sie, wenn Ihre App in einem Browser ausgeführt wird, möglicherweise mehr Helden in Echtzeit hinzufügen möchten. Es könnte also eine Methode geben, mit der ein erstellter Held an das Array angehängt wird. Die Art und Weise, wie Sie Ihren Code hatten, erlaubt nicht, dass mehr Helden hinzugefügt werden, weil auf die drei von ihnen mit individuellen öffentlichen Eigenschaften der Komponente verwiesen wurde.

Sie benötigen auch einen Konstruktor in Ihrer Hero-Klasse, wenn Sie neue erstellen möchten, während Sie die id und die name übergeben.

Hoffe, das hilft! Viel Spaß mit Angular!

Answer 2

Sie müssen eine Reihe von Helden Objekte wie

this.heroes = [ 
     new Hero(1, 'XXX'), 
     new Hero(2, 'YYY'), 
     new Hero(3, 'ZZZ') 
    ]; 

erstellen, wenn Sie diesen Ansatz verwenden, müssen Sie einen Konstruktor in Ihrem Held Komponentenklasse haben, die das Objekt initialisiert.

Anschließend können Sie mit ngFor i: e Strukturrichtlinie das Ergebnis in der Vorlage ausdrucken.

wie

<div *ngFor = "let hero of heroes"> 
    {{hero.id}} -- {{hero.name}} 
</div> 

oder der nächste Ansatz wird wie ein normales Objekt-Array zu verwenden.

this.heroes = [ 
{name: 'XXXX',id : '1'}, 
{name: 'YYY',id : '2'} 
]; 

Überprüfen dieser Verbindung für weitere Winkelkonzepte

https://rahulrsingh09.github.io/AngularConcepts