Eckige 4-String-Parameter

Question

Ich bin ein wenig ratlos, warum meine Eingangsparameter in Zahlen umgewandelt werden. Ich habe diese Komponente:

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

@Component({ 
    selector: 'app-tile', 
    templateUrl: './tile.component.html', 
    styleUrls: ['./tile.component.css'] 
}) 
export class TileComponent implements OnInit { 
    @Input() icon1: string; 
    @Input() headerText1: string; 
    @Input() mainText: string; 
    @Input() footerText: string; 

    constructor() { } 

    ngOnInit() { 
    } 

} 

und die Vorlage:

<div class="widget widget-stats bg-green"> 
    <div *ngIf="icon1" class="stats-icon"><i class="fa {{icon1}}"></i></div> 
    <div class="stats-info"> 
     <h4>Header - {{headerText1}}</h4> 
     <p>Icon - {{icon1}}</p> 
     <p>Main - {{mainText}}</p>  
     <p>Footer - {{footerText}}</p> 
    </div> 
</div> 

diese diese von einer anderen Komponente Passing funktioniert:

<app-tile [headerText1]="43543" [mainText]="123456" [footerText]="243542354235" [icon1]="999"></app-tile> 

Aber ich will diese:

<app-tile [headerText1]="TOTAL VISITORS" [mainText]="93%" [footerText]="243542354235" [icon1]="fa-users"></app-tile> 

headerText1 schlägt zur Kompilierzeit fehl, da ein Leerzeichen vorhanden ist und wenn ich es entferne, wird der Wert nie angezeigt und icon1 zeigt NaN.

Warum werden diese als Zahlen behandelt, wenn ich sie klar als Strings definiert habe?

Answer 1

Wenn ich Ihre Frage richtig verstanden habe, Stringliterale innerhalb der doppelten Anführungszeichen einfache Anführungszeichen zu übergeben Versuchen Sie, ein Ausdruck, wie folgt aus:

<app-tile [headerText1]="'TOTAL VISITORS'" [mainText]="'93%'"