Angular2布尔@input属性得到设定为串 - 结合嵌套属性

我有一个外部部件与属性：Angular2布尔@input属性得到设定为串 - 结合嵌套属性

Loading: Boolean = false;

该外部构件是设置一个嵌套组件上该属性：

<etp-loader text="loading..." loading="{{Loading}}"></etp-loader>

当我在嵌套组件上进行typeof（this.Loading）时，我得到了字符串，这个[我相信]是什么抛出了整个逻辑。

这里是我的嵌套的组件：

import { Component, AfterViewInit, OnInit, Input} from '@angular/core' 
@Component({ 
    selector: 'etp-loader', 
    template: `<div *ngIf="loading" class="progress" style="margin-left: 10%; margin-right: 10%;"> 
       <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" 
         aria-valuemax="100" style="width:100%;"> 
         {{text}} 
       </div> 
       </div>` 
}) 
export class EtpLoaderComponent { 
    @Input() 
    text: string; 

    @Input() 
    loading: Boolean;  

    ngOnInit() { 
     console.debug('init: loader state: ', 
         this.loading, 
         typeof(this.loading)); // => init: loader state: false string 
    } 
}

编辑 - 去除无关位

来源

2017-01-25 Sonic Soul

的打字稿类型布尔值全部小写。你可以这样试试吗？此外，你正在分配加载值错误：请尝试： – Riscie

布尔没有什么区别，但[加载]是问题:) –

如果Loading是一个布尔值，然后用

[loading]="Loading"

{{}}是字符串插值结果将永远是一个严格的标准G。

Angular不知道布尔属性。如果你只是想知道，如果一个属性设置与否，你可以使用一个setter像

isLoading:Boolean; 

@Input() 
loading set(value: Boolean) { 
    this.isLoading = value != 'false'; 
}

，并使用它像

<etp-loader loading>

和isLoading将被设置为true

来源

2017-01-25 16:41:10

谢谢！非常了解{{}}总是字符串，现在变得非常有意义。 –

角上的BOO。 YAY为你的答案！ –

@EricNovins不知道“BOO”是什么，但感谢“YAY”:-) –

Angular2布尔@input属性得到设定为串 - 结合嵌套属性

回答

相关问题