角4つの文字列パラメータ

Question

私の入力パラメータが数値になっている理由を知りました。

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() { 
    } 

} 

とテンプレート：： 私はこのコンポーネント持っ

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

しかし、私はこれ欲しい：：

<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> 

別のコンポーネントからこれらの本を渡すの作品

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

を

スペースがあるので、headerText1はコンパイル時に失敗します。削除すると、値は表示されず、アイコン1はNaNを表示します。

文字列として明確に定義した場合、これらを数値として扱うのはなぜですか？

Answer 1

私は文字列リテラルを渡すために、正確にあなたの質問を理解していれば、このように、二重引用符、表現内の単一引用符を追加してみてください：

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