Question

我是Angular的新手，我正在尝试创建一个程序来计算它在源文件中找到的所有错误。我有主要组件加载到模块中，每个模块加载到该模块的方法中。

每种方法的错误计数是方法的错误计数。
每个模块的错误计数是该模块方法错误的总和计数。
上面显示的总错误是所有的总数模块错误。

如果任何级别都有错误，则该错误计数将显示在红色气泡中。如果没有错误，将显示带有复选标记的绿色气泡。

我遇到的问题是页面首次加载时总错误编号是正确的，但显示绿色气泡和复选标记。一旦我与页面交互（通过单击模块标题展开任何模块或通过单击＆＃34; x＆＃34;删除模块），正确的样式将应用于总计数。我使用相同的变量totalErrorCount来显示数字计数并确定样式。

问题：

为什么数值正确加载，但在交互之前计算的样式不正确？

不正确（在页面加载时，在互动之前）：

正确（互动后）：

主要组件HTML的相关摘录：

<div>
    Total Errors: <span class="header-badge" [ngClass]="{'has-error': totalErrorCount > 0, 'fa fa-check': totalErrorCount === 0}">{{totalErrorCount}}</span>
</div>

主要组成部分SCSS的相关摘录：

.header-badge {
    background-color: #008000;
    border-radius: 10px;
    display: inline-block;
    height: 15px;
    line-height: 17px;
    margin: -3px 6px 0 0;
    padding: 5px;
    text-align: center;
    min-width: 15px;
    color: #fff;

    &.has-error {
        background-color: #8b0000;
    }

    &.has-warning {
        background-color: #ea800f;
        margin-right: 6px;
    }

    &.has-info {
        background-color: #6495ed;
        margin-right: 6px;
    }
}

组件类（主要）的相关摘录：

export class DocumentationHelperComponent {
    private helperResults: any;
    private moduleKeys: Array<String>;
    private totalErrorCount: number;

    constructor(
        private documentationHelperService: DocumentationHelperService,
    ) {}

    getResults(): void {
        this.documentationHelperService.getResults()
            .then((results) => {
                this.helperResults = results;
                this.moduleKeys = Object.keys(this.helperResults);
            });
    }

    getTotalErrorCount(totalErrors=0): Number {
        this.totalErrorCount += totalErrors;
        return this.totalErrorCount;
    }

    ngOnInit(): void {
        this.totalErrorCount = 0;
        this.getResults();
    }
}

组件类（模块）的相关摘录：

export class DocumentationHelperModuleComponent implements OnInit {
    @Input() moduleName: String;
    @Input() moduleData: any;
    private showContents: Boolean;
    private methodKeys: Array<String>;
    private methodLength: Number;
    private hideModule: Boolean;
    private totalErrors: number;

    @Output() onTotalErrorsCounted: EventEmitter<any> = new EventEmitter<any>(); 

    constructor(private cdRef:ChangeDetectorRef) {}

    ngAfterViewChecked() {
        this.cdRef.detectChanges();
    }

    updateTotalErrors(errorCount): void {
        this.totalErrors += errorCount; 
        this.onTotalErrorsCounted.emit(errorCount);
    }

    decrementErrorCount(theseErrors): Number {
        this.totalErrors = theseErrors;
        this.onTotalErrorsCounted.emit( -1 * this.totalErrors);
        return this.totalErrors; 
    }

    ngOnInit(): void {
        this.showContents = false;
        this.methodKeys = Object.keys(this.moduleData);
        this.methodLength = this.methodKeys.length;
        this.hideModule = false;
        this.totalErrors = 0;
    }
}

如果我有任何其他代码可以提供帮助，请告诉我。

Angular - 条件样式在与页面

0 个答案: