英文:
Angular: Get the correct width value of a div element when the browser width changes
问题
我有一个div元素，如果浏览器的宽度小于或等于dv元素的宽度，它会自动缩小。为此，我使用ngAfterViewChecked()。但是当div元素自动更改其宽度时，我会收到一个错误。
test.component.html：
<div style="display:inline" #myContainer><!-- 这只是一个示例 --><div><li>...</li><li>...</li><ng-container *ngIf="coOffset <= winWidth;"><li>...</li><li>...</li></ng-container><div></div>
test.component.ts：
public coOffset: number;public winWidth: any;@ViewChild('myContainer') coRef: ElementRef;onResize(event) {this.winWidth = window.innerWidth;}ngAfterViewInit (): void {this.coOffset = this.coRef.nativeElement.offsetWidth;}ngAfterViewChecked(): void {this.coOffset = this.coRef.nativeElement.offsetWidth;this.cd.detectChanges();}
英文:
I have a div element that automatically shrinks if the width of the browser is less than or equal to the dv element width. For that I use ngAfterViewChecked(). But I get an error when the div element changes its width automatically.
test.component.html:
<div style="display:inline" #myContainer>//this is only an example<div><li>...</li><li>...</li><ng-container *ngIf="coOffset <= winWidth;"><li>...</li><li>...</li></ng-container><div></div>
test.component.ts:
public coOffset: number;public winWidth: any;@ViewChild('myContainer') coRef: ElementRef;onResize(event) {this.winWidth = window.innerWidth;}ngAfterViewInit (): void {this.coOffset = this.coRef.nativeElement.offsetWidth;}ngAfterViewChecked(): void {this.coOffset = this.coRef.nativeElement.offsetWidth;this.cd.detectChanges();}
The error message reads:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ...
I found many examples on the internet, but they couldn't solve my problem. Can someone help me please. Thanks
答案1
得分: 0
以下是代码部分的中文翻译：
唯一遗漏的是在ngAfterViewInit中缺少ChangeDetectorRef。我已经重现了相同的问题，并通过在ngAfterViewInit中添加detectChanges来修复它。
以下是ts文件的完整代码：
import { ChangeDetectorRef, Component, HostListener, ViewChild } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.sass']})export class AppComponent {public coOffset: any;public winWidth: any;@HostListener('window:resize', ['$event'])onResize() {this.resized();}@ViewChild('myContainer') coRef: any;constructor(public cd: ChangeDetectorRef){this.winWidth = window.innerWidth;}ngAfterViewInit (): void {this.coOffset = this.coRef.nativeElement.offsetWidth;this.cd.detectChanges();}resized(): void {this.coOffset = this.coRef.nativeElement.offsetWidth;this.cd.detectChanges();}}
此外，请查看以下链接，以可视化地了解问题和解决方案：TestWise Replay | StackOverFlow QA - Angular: Get the correct width value of a div element when the browser width changes
英文:
The only thing you are missing is ChangeDetectorRef in ngAfterViewInit. I had reproduced the same problem and fixed by just adding detectChanges in ngAfterViewInit.
Here is complete code of ts file
import { ChangeDetectorRef, Component, HostListener, ViewChild } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.sass']})export class AppComponent {public coOffset: any;public winWidth: any;@HostListener('window:resize', ['$event'])onResize() {this.resized();}@ViewChild('myContainer') coRef: any;constructor(public cd: ChangeDetectorRef){this.winWidth = window.innerWidth;}ngAfterViewInit (): void {this.coOffset = this.coRef.nativeElement.offsetWidth;this.cd.detectChanges();}resized(): void {this.coOffset = this.coRef.nativeElement.offsetWidth;this.cd.detectChanges();}}
Besides, please have a look at the link below to see the issue & solution visually: TestWise Replay | StackOverFlow QA - Angular: Get the correct width value of a div element when the browser width changes
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论