angular 2+ NgStyleで入力パラメータをバインドしようとしています

Question

問題：HTML（このテストではhome.html）に表示される場所に入力できる、幅100％と高さを持つ単一のコンポーネント（スペーサー） ：

number 1 
    <spacer height="'200px'"></spacer> 
    no more 

spacer.html：

<div class="container-fluid spaceContainer" [ngStyle]="{'height': 'height'}"> 
    spacer is here <<<--- this text is just for testing 
</div> 

SCSS：

.spaceContainer { 
    width: 100%; 
    border: 1px solid red; 
    display: flex; 
    flex-direction: row; 
} 

Spacer.ts：

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

@Component({ 
    selector: 'spacer', 
    templateUrl: './spacer.component.html', 
    styleUrls: ['./spacer.component.scss'] 
}) 
export class SpacerComponent implements OnInit { 
    @Input() height: string; 

    constructor() { 
    } 

    ngOnInit() { 
    console.log('height is '+ this.height); 
    } 
} 

それを実行すると、にconsole.logが与える：高さは「200pxの」 ですが、赤境ボックスの高さは、ちょうど十分な「スペーサーはここにある」テキストを保持することです。

私は少しバインディング理解を苦労ので、私が試した：

<spacer height="200px"></spacer> 

コンソールを：高さは、私が仕事だろうと思っ200pxのが、変更なしです。 attrを理解していないので、私はattr.heightの変種を試しました。

これは簡単でなければならず、バインディングの仕組みに関する誤解を解決するのに役立ちます。事前に おかげで、 ヨギ

Answer 1

はあなたの間違いは、この行の場所にあります。

[ngStyle]="{'height': 'height'}" 
        ^^^^^^^^^^ 
       it should be just height 

あなたは、文字列'height'に高さを結合しているが、あなたのようなコンポーネント何かのheightプロパティにバインドする必要があります

[ngStyle]="{'height': height}">? 

または

[style.height]="height"