Question

我是Angular2的新手，所以有很多事情我不会＆＃39;知道了。我创建了以下组件：

@Component({
    selector: 'game-card',
    templateUrl: 'assets/js/app/play/game-card.html',
    directives: [NgIf, ReferencesModalComponent]
})

export class GameCardComponent
{
    public showUserReferences: boolean = false;

    public showUserReferencesModal()
    {
        this.showUserReferences = true;
    }
}

要使用该组件，我有以下模板：

<div>
    <references-modal *ngIf="showUserReferences == true"></references-modal>

    <button class="basic-link" (click)="showUserReferencesModal()">
        <small>Références</small>
    </button>
</div>

问题是该方法被正确调用，但this.showUserReferences的值永远不会改变...说实话，如果我们在改变其值后立即打印该属性，那就很好了。但是，如果我们再次调用该方法，则值不会改变......

修改

感谢大家的回答。我终于发现了什么问题。我在NgFor循环中调用我的组件。

    <div *ngFor="#results of getResults()"></div>

问题是循环一个方法。我用一个简单的数组替换了getResults（），现在一切正常。

Answer 1

但是，如果我们再次调用方法，则值不会更改

public showUserReferencesModal()
{
    this.showUserReferences = !this.showUserReferences;
}

或者只是（如果你不想调用showUserReferencesModal方法），

(click)="showUserReferences = !showUserReferences"

Answer 2

您可以不使用方法来执行此操作：

<div>
    <references-modal *ngIf="showUserReferences"></references-modal>

    <button class="basic-link" (click)="showUserReferences = !showUserReferences">
        <small>Références</small>
    </button>
</div>

Answer 3

这里需要注意几点： -

无需向指令添加NgIf。它是CORE_DIRECTIVES的一部分，默认情况下全局可用，如@gunter所述
无需在* ngIf中查看true，因为这已经接受true / false。当showUserReferences为true时，此代码应该有效：

*ngIf="showUserReferences"

您可以使用

(click)="showUserReferences = !showUserReferences"

无法更改组件属性

3 个答案: