2017-09-20 10 views
1

main.component.htmlAngular 4 Weitergabe der Daten in HTML

<form (submit)="onSubmit()"> 
    height: 
    <input type="number" name="height" [(ngModel)]="user.height"> 
    <br><br> 
    Weight: 
    <input type="number" name="weight"[(ngModel)]="user.weight"> 
    <br><br> 
    <input type="submit"> 
</form> 

<h5 *ngFor="let user of users"> 

    {{user.score}} 

</h5> 

main.component.ts

export class MainComponent implements OnInit { 
    users = []; 

    user = { 
     height: 0, 
     weight: 0, 
    }; 

    onSubmit() { 
     console.log(this.user.height); 
     console.log(this.user.weight); 

     var score = this.user.weight * this.user.height; 
     this.users.push(score); 

     console.log(score); 


     this.user = { 
      height: 0, 
      weight: 0 
     } 
    } 
} 

this.user.weight und this.user.height werden multipliziert und in var gespeichert Ergebnis. Aber wie übertrage ich den var-Score, um ihn in meiner main.component.html anzuzeigen? Ich habe versucht, punkten in Benutzer-Array, aber es ist nicht in meiner main.component.html angezeigt.

+0

verwenden, Sie haben kein Mitglied 'score' in' user'. füge es hinzu und speichere den berechneten Wert. –

+0

Sie verwenden TypeScript, verwenden jedoch nirgendwo Typen. Geben Sie die Typen Ihrer Variablen an, und der Compiler wird Ihnen sagen, was Sie falsch machen. 'user' soll (glaube ich) ein Array von Benutzern sein (so' Array '), aber Sie drücken Scores auf dieses Array (von Typennummer). Sie sollten die Punktzahl jedes Benutzers anzeigen, aber Sie haben keine Punktzahl in den Benutzern. Außerdem ist Ihr Code nicht eingerückt, wodurch er sehr schwer zu lesen ist. Das sind alles grundlegende Dinge. Lernen und wenden Sie die Grundlagen an. –

Antwort

1

Sie es nicht in Benutzern schieben; Entfernen Sie var und verwenden Sie this.score = this.user.weight * this.user.height, und dann in Ihrem Haupt ... html können Sie als {{score}}

1

Punktzahl kein Objekt ist, sollte es

sein, dies
<div *ngFor="let user of users"> 
<h1>{{user }}</h1> 
</div> 
+0

'Benutzer' ist ein Objekt. 'Benutzer' ist ein Array. Verpassen Sie nicht die 's' –

+1

@ i-- nein: Lesen Sie den Code: es füllt das Array mit' var score = this.user.weight * this.user.height; this.users.push (score); '. Also sind die Elemente des Arrays Zahlen. –

+1

@ i-- tatsächlich Punktzahl – Sajeetharan

0

Versuchen:

<h5 *ngFor="let user of users"> 
{{user | json}} 
</h5> 
+0

fügen Sie bitte eine Erklärung des Codes. Bitte lesen [Antwort] –

Verwandte Themen