英文:
how to update childView element height
问题
我想要根据最高的项目来更新ngFor元素中的每个项目的高度。思路是从ViewChild中获取每个高度，然后将输出发射到容器，然后将其推送到子元素（或通过可观察服务），然后更新子元素的高度以获得相同的高度和在同一行上的漂亮摘要。当然，著名的ExpressionChangedAfterItHasBeenCheckedError*错误会出现。对于ViewChild/Children并不是很熟悉，每个人都说不要在AfterViewInit中更改它，但我应该在哪里做，如何正确解决它呢？
不同之处在于在Stackblitz中我不会收到这个错误，但仍然不知道如何解决这个问题..?
英文:
I want to update each item height in *ngFor elements' based on the tallest item. The idea was to get each height from ViewChild, then emit output to container, and then push it (or via observable service) to the child and then update height of the child to get the same height and nice summary on the same line. Of course famous ExpressionChangedAfterItHasBeenCheckedError came out. Not very familiar with ViewChild/Children and everyone says about NOT changing it in AfterViewInit but where should I do and how to solve it properly?
What's different is that in Stackblitz I don't get this error, but still don't know how to solve the problem..?
code: stackblitz source code
答案1
得分: 1
AfterViewInit error - NG100 是一个常见的 Angular 错误。基本上，它意味着在变更检测已经运行之后，你试图改变某些可视元素（可以是元素的高度或类似插值字符串的值）。
不幸的是，仅从 StackBlitz 代码片段来看，而无法重现错误，这很难进行调试。
关于原始问题，可以纯粹使用 CSS 来实现。
只需将以下类添加到 app 项目组件：
:host {
display: flex;
height: 100%;
}
// 用这个替换你以前的容器类
.container {
flex-grow: 1;
padding: 5px;
margin: 5px;
border: 3px dotted dodgerblue;
}
英文:
The AfterViewInit error - NG100 is a common angular error. Basically, it means that you are trying to change some visual element (this can height of an element or something like the value of an interpolated string) after change detection has run.
Unfortunately, just from the stackblitz and without being able to reproduce the error, it is difficult to debug.
Regarding the original question, it can be achieved purely with css.
Simply add the following classes to the app item component:
:host {
display: flex;
height: 100%;
}
// Replace your old container class with this
.container {
flex-grow: 1;
padding: 5px;
margin: 5px;
border: 3px dotted dodgerblue;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论