英文:
angular *ngIf not working when ngstyle works
问题
以下是您要的翻译部分:
这是我的 Angular 代码,当底部元素加载时 ngif
不起作用,可能是为什么?
以下是我片段中使用的组件代码和 HTML。
问题真的很奇怪,因为代码应该正常工作。但是对于 ngif
,!loading
表达式却运行良好。
export class AppComponent implements OnInit {
title = 'Angular 应用';
products: Iproduct[] = [];
parentData: string = "这是父数据";
details: boolean = false;
loading: boolean = false;
variable: boolean = true;
constructor(private productsService: ProductsService) {
}
// 服务提供数据
ngOnInit(): void {
this.loading = true
this.productsService.getProducts().subscribe(products => {
setTimeout(() => {}, 2000);
this.products = products;
this.loading = false;
this.variable = false;
});
}
}
<h1 class="text-center" [ngStyle]="{'visibility': loading ? 'visible' : 'hidden' }">加载中 ngstyle 23..</h1>
<h1 *ngIf="loading" class="text-center">加载中..</h1>
<h1 *ngIf="!loading" class="text-center">未加载中..</h1>
<app-product-component [stringHardCode]="'字符串硬编码'" [childData]="parentData"
*ngFor="let product of products; let i = index" [product]="product">
请注意,上述代码是您提供的代码的翻译。如果您有任何其他问题或需要进一步的帮助,请随时告诉我。
英文:
This is my angular code when bottom element load working
ngif is not working, why could be so?
Below there is component code and html , which are using in my snippet.
Problem is really strange, because code should work. But !loading expression works well for ngif.
<br />
Before loading;
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
export class AppComponent implements OnInit {
title = 'Anular Application';
//products: Iproduct[] = data;
products: Iproduct[] = [];
parentData: string = "This is parent data";
details: boolean = false;
loading: boolean = false;
variable: boolean = true;
constructor(private productsService: ProductsService, ) {
}
//service proving us the data
ngOnInit(): void {
this.loading = true
this.productsService.getProducts().subscribe(products => {
setTimeout(() => {}, 2000);
this.products = products;
this.loading = false;
this.variable = false;
});
}
}
<!-- language: lang-html -->
<h1 class="text-center" [ngStyle]="{'visibility': loading ? 'visible' : 'hidden' }">Loading ngstyle 23..</h1>
<h1 *ngIf="loading" class="text-center">Loading if ..</h1>
<h1 *ngIf="!loading" class="text-center">not Loading if ..</h1>
<app-product-component [stringHardCode]="'string hardcoded'" [childData]="parentData"
*ngFor="let product of products; let i = index" [product]="product">
<!-- end snippet -->
答案1
得分: 1
<h1 class="text-center" [ngStyle]="{'visibility': loading ? 'visible' : 'hidden' }">使用 ngStyle 加载中..</h1>
<h1 *ngIf="loading" class="text-center">使用 *ngIf 加载中..</h1>
<h1 *ngIf="!loading" class="text-center">未加载使用 *ngIf..</h1>
<app-product-component
[stringHardCode]="'硬编码的字符串'"
[childData]="parentData"
*ngFor="let product of products; let i = index"
[product]="product">
</app-product-component>
**.ts 文件**
export class AppComponent implements OnInit {
title = 'Angular 应用程序';
products: IProduct[] = [];
parentData: string = "这是父级数据";
loading: boolean = true;
variable: boolean = true;
constructor(private productsService: ProductsService) {}
ngOnInit(): void {
this.productsService.getProducts().subscribe(products => {
setTimeout(() => {
this.products = products;
this.loading = false;
this.variable = false;
}, 2000);
});
}
}
英文:
<h1 class="text-center" [ngStyle]="{'visibility': loading ? 'visible' : 'hidden' }">Loading using ngStyle..</h1>
<h1 *ngIf="loading" class="text-center">Loading using *ngIf..</h1>
<h1 *ngIf="!loading" class="text-center">Not Loading using *ngIf..</h1>
<app-product-component
[stringHardCode]="'string hardcoded'"
[childData]="parentData"
*ngFor="let product of products; let i = index"
[product]="product">
</app-product-component>
**.ts file**
export class AppComponent implements OnInit {
title = 'Angular Application';
products: IProduct[] = [];
parentData: string = "This is parent data";
loading: boolean = true;
variable: boolean = true;
constructor(private productsService: ProductsService) {}
ngOnInit(): void {
this.productsService.getProducts().subscribe(products => {
setTimeout(() => {
this.products = products;
this.loading = false;
this.variable = false;
}, 2000);
});
}
}
With these changes, the loading and conditional rendering should work as expected.
答案2
得分: 1
更新 Pratik比我快 :)(你有一个“类型错误”,请查看setTimeout函数中应该有{}
的地方),所以只是一个建议:
如果你想模拟“延迟”,你也可以使用rxjs操作符delay:
this.productsService.getProducts().pipe(
delay(2000)
).subscribe(products => {
this.products = products;
this.loading = false;
this.variable = false;
})
英文:
Update Pratik was faster than me (You have a "type error", see where should be the {
}
in the setTimeout function), so only an advice:
If you want to simulate a "delay", you can also use the rxjs operator delay
this.productsService.getProducts().pipe(
delay(2000)
).subscribe(products => {
this.products = products;
this.loading = false;
this.variable = false;
})
答案3
得分: 1
你的问题似乎不在于 *ngIf
指令,而在于你对 setTimeout
函数的理解和使用方式。setTimeout
函数的工作方式是在指定的时间过后调用提供的回调函数。它不会停止你的代码或在你的代码中引入延迟(请参阅MDN)。因此,问题很可能是 productsService.getProducts
不需要太多时间就能完成,因此加载文本显示的时间太短,你可能无法注意到它甚至渲染出来。
要使加载文本可见,你需要引入一个足够长的延迟时间。这可以通过多种方式实现,但主要有两个选项:
第一种选项是使用 setTimeout
,但修复空回调函数:
ngOnInit(): void {
this.loading = true;
this.productsService.getProducts().subscribe(products => {
setTimeout(() => {
this.products = products;
this.loading = false;
this.variable = false;
}, 2000);
});
}
第二种选项是使用 rxjs 的 delay
操作符:
ngOnInit(): void {
this.loading = true;
this.productsService.getProducts()
.pipe(delay(2000))
.subscribe(products => {
this.products = products;
this.loading = false;
this.variable = false;
});
}
英文:
Your problem doesn't seem to be with the *ngIf
directive, but rather with your understanding and usage of the setTimeout
function. The setTimeout
function works by calling the provided callback function after a specified time has passed. It doesn't stop your code or introduce a delay in your code (See MDN). Therefore the issue is most likely that productsService.getProducts
doesn't take a lot of time to complete and so the amount of time the loading text is displayed is too short for you to notice or even be rendered.
To make the loading text visible you'd have to actually introduce a delay that would allow the text to be displayed for long enough. This could be done in many ways, but mainly there are two options:
The first option would be using setTimeout
, but fixing the empty callback:
ngOnInit(): void {
this.loading = true;
this.productsService.getProducts().subscribe(products => {
setTimeout(() => {
this.products = products;
this.loading = false;
this.variable = false;
}, 2000);
});
}
The second option would be to use the rxjs delay
operator:
ngOnInit(): void {
this.loading = true;
this.productsService.getProducts()
.pipe(delay(2000))
.subscribe(products => {
this.products = products;
this.loading = false;
this.variable = false;
});
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论