Question

即使后端正确更新，我也无法让ngClass更新我的视图。我的控制器如下：

@Component({
    selector: 'show-hide-table',
    template: '
    <table>
        <thead>
            <tr>
                <th (click)="toggleHidden()">
                    <div>Show/Hide</div>
                </th>
                <th [ngClass]="{\'hidden\':isHidden}">
                    <div>Div is Shown</div>
                </th>
            </tr>
        </thead>
    </table>',
    styleUrls: ['show-hide-table.component.css']
})

export class ShowHideTable implements OnInit, OnChanges, DoCheck {
    public isHidden: boolean = false;

    public toggleHidden() {
        this.isHidden = !this.isHidden;
        this.log.debug('Hidden', this.isHidden);
    }

    ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
        this.log.debug('Grid Changes');
    }

    ngDoCheck() {
        this.log.debug('Grid Check');
    }
}

'hidden'是一个带有display：none的css类。当我默认isHidden为true时，标题被隐藏，当为false时，它会被显示，所以我相信这个类正在工作。我为了询问而简化了它，但这应该准确地反映我的代码。我点击标题，我得到一个日志显示isHidden变量切换，但隐藏的类没有改变以适应。此外，单击可点击标题时，ngOnChanges和ngDoCheck都不会触发。

Answer 1

你有太多单引号。 'hidden'周围的引号实际上结束了第一个字符串并开始另一个字符串。你必须逃避这些报价。

<th [ngClass]="{\'hidden\':isHidden}">

我不能测试这个，但它应该工作。如果由于某种原因它不能尝试使用引号的Javascript编码。将单引号替换为\x27。

Angular 2 ngClass不在视图上更新

1 个答案: