*ngIf 的 Angular2 @Input 不起作用（空）答案

【问题标题】：Angular2 @Input for *ngIf is not working (null)*ngIf 的 Angular2 @Input 不起作用（空）
【发布时间】：2016-12-14 09:14:22
【问题描述】：

我使用的是 ~2.1.1 版本

我在这里尝试了答案，但没有任何建议对我有用： Angular 2 Component @Input not working

这是我在另一个组件中使用的微调器组件：

import {Component} from '@angular/core'
import {Post} from './post'
import {PostsService} from './posts.service'


@Component({
    selector: 'home',
    template: `<h2>Posts</h2>

        <spinner [visible]="isloading"></spinner>

        <ul *ngFor="let post of posts" class="list-group">

            <li class="list-group-item"> {{post.body}}  </li>

        </ul>
    `,
    providers:[PostsService],

})

export class PostsComponent{

    posts:Post[];
    isLoading:boolean = true;

    constructor(private _postsService: PostsService){

   }

     ngOnInit(){

       this._postsService.getPosts()
            .subscribe(posts => {
                this.isLoading = false;
                this.posts = posts;
            });
     }


}

这是标签在浏览器中的输出：

<!--template bindings={
  "ng-reflect-ng-if": null
}-->

我还尝试在 ngOnInit() 中将“可见”初始化为 true，然后微调器将显示，但我无法通过将 isloading 设置为 false 来再次隐藏它；

【问题讨论】：

听起来您的 isloading 属性没有绑定到您的模板。您可能想发布您的其他组件。
请在包含微调器组件的地方发布其他组件。
我发布了其他组件
啊啊啊我明白了——应该是“isLoading”而不是“isloading”
很高兴你解决了 :)

标签： angular angular-ng-if

【解决方案1】：

您的变量在模板和组件之间的名称不同。

在模板中你有'isloading'，在组件中'isLoading'。

外壳很重要。

【讨论】：