Question

我试图从我从组件init上加载的静态json文件中获取的数据创建bootstrap Togglable标签。对于选项卡，我需要为tabpanel和tablist上的href属性生成随机ID。

我得到的结果是WORKS，但我确实在控制台中看到了这个错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'j5e0vxl5-lua'. Current value: 'j5e0vxlz-5xl'.
at viewDebugError (core.es5.js:8418)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8396)
at checkBindingNoChanges (core.es5.js:8560)
at checkNoChangesNodeInline (core.es5.js:12421)
at checkNoChangesNode (core.es5.js:12395)
at debugCheckNoChangesNode (core.es5.js:13172)
at debugCheckRenderNodeFn (core.es5.js:13112)
at Object.eval [as updateRenderer] (WorkflowComponent.html:116)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094)
at checkNoChangesView (core.es5.js:12217)

WorkflowComponent.html

<div class="col-sm-12" [attr.random]="randomText(true)">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation">
            <a [attr.href]="'#random-'+randomText()" [attr.aria-controls]="'random-'+randomText()" role="tab" data-toggle="tab">
                <strong>Tab name</strong>
            </a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" [attr.id]="'random-'+randomText()">
            <div>
                <p>Tab content</p>
            </div>
        </div>
    </div>
</div>

workflow.components.ts randomText方法

randomText(generateRndmText = false) {
    if ( generateRndmText ) {
        this._rndmText = (Math.random() + (+new Date)).toString(36).replace('.', '-');
    }
    console.log('RANDOM: ' + this._rndmText);
    return this._rndmText;
}

Answer 1

感谢@Maximus的链接。它帮助我理解为什么会这样。

我已经改变了我的设计并使用了ng的索引。这包含在内，现在工作正常。

但是我仍然很好奇是否有办法实现这样一种方法，它会在摘要进行过程中改变数值。原因是我不需要改变该变量的数据，它的全部目的是提供对DOM对象的引用。就我而言，一旦完成摘要，它就可能是未定义的。

生成导致ExpressionChangedAfterItHasBeenCheckedError的随机id属性

1 个答案: