javascript - Angular 2 ngClass 未在 View 上更新

Question

我在让 ngClass 更新我的 View 时遇到了一些困难，即使后端正在正确更新。我的 Controller 如下:

@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 时，它​​被显示，所以我相信这个类正在工作。我为了提问而简化了它，但这应该准确地反射(reflect)了我的代码。我单击标题，我得到一个显示 isHidden 变量切换的日志，但隐藏类没有更改以适应。此外，点击可点击 header 时，ngOnChanges 和 ngDoCheck 都不会触发。

Answer 1

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

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

我无法对此进行测试，但它应该可以工作。如果出于某种原因，您可以尝试使用引号的 Javascript 编码。将单引号替换为 \x27。