Question

我试图允许通过用户切换隐藏我正在处理的项目的某些部分。使用以下代码将其保存在数据库中并在将页面加载到构造函数中时被拉出

this.http.get(`api/section/get/${this.id}`, this.id).subscribe(res => {
            this.section = res.json()[0];
            this.sect = res.json();
            console.log(this.section);

            this.hideIntro = this.sect[0].hideIntro;
            this.hideMainVideo = this.sect[0].hideMainVideo;
            this.hideHandout = this.sect[0].hideHandout;
            this.hideQuiz = this.sect[0].hideQuiz;

            console.log("Hide Intro = " + this.hideIntro);
            console.log("Hide Main = " + this.hideMainVideo);
            console.log("Hide Handout = " + this.hideHandout);
            console.log("Hide Quiz = " + this.hideQuiz);
});

HTML如下...

<div class="row classMainBackground col-md-12" *ngIf="!hideIntro">
...content...
</div>

由于某种原因，无论我做什么，无论是将其更改为* ngIf =“ hideIntro == false”还是什至使用[hidden] =“ hideIntro”，它都无法正常工作。

即使.ts文件中的控制台日志也正确显示。有什么原因对我不起作用吗？我在其他位置使用过它，在那儿工作正常...

它与在构造函数中分配它有关吗？

谢谢！

Answer 1

响应于与组件的使用交互而运行角度变化检测。如果在事件处理之外（例如在HTTP请求之后）更新了值，则需要手动告诉组件它已更改。

constructor(private changeDetector: ChangeDetectorRef){}

this.http.get(`api/section/get/${this.id}`, this.id).subscribe(res => {
    [...]
    this.changeDetector.markForCheck();
})

更多深度阅读：https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Answer 2

我最终通过在HTML中使用{{！section.hideIntro}}解决了这个问题，而不是尝试定义一个新变量以将该布尔值传递给它。

我相信答案是@ Vlad274和@ConnorsFan提到的内容的组合。

HTML返回了{{hideIntro}}的[对象对象]，在DOM实际加载之前，从GET响应分配新的值数据之间似乎存在延迟。

直接从GET respone变量中获取数据就可以了。

* ng如果或[隐藏]无法正常运作

2 个答案: