*ngIf指令不起作用,而ngStyle起作用。

huangapple go评论63阅读模式
英文:

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;

*ngIf指令不起作用,而ngStyle起作用。
<br />
After loading;

*ngIf指令不起作用,而ngStyle起作用。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

export class AppComponent implements OnInit {
  title = &#39;Anular Application&#39;;
  //products: Iproduct[] = data;
  products: Iproduct[] = [];
  parentData: string = &quot;This is parent data&quot;;
  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 =&gt; {
      setTimeout(() =&gt; {}, 2000);
      this.products = products;
      this.loading = false;
      this.variable = false;
    });

  }
}

<!-- language: lang-html -->

&lt;h1 class=&quot;text-center&quot; [ngStyle]=&quot;{&#39;visibility&#39;: loading ? &#39;visible&#39; : &#39;hidden&#39; }&quot;&gt;Loading ngstyle 23..&lt;/h1&gt;
&lt;h1  *ngIf=&quot;loading&quot; class=&quot;text-center&quot;&gt;Loading if ..&lt;/h1&gt;
&lt;h1  *ngIf=&quot;!loading&quot; class=&quot;text-center&quot;&gt;not Loading if ..&lt;/h1&gt;
&lt;app-product-component [stringHardCode]=&quot;&#39;string hardcoded&#39;&quot; [childData]=&quot;parentData&quot; 
    *ngFor=&quot;let product of products; let i = index&quot; [product]=&quot;product&quot;&gt;

<!-- end snippet -->

答案1

得分: 1

    &lt;h1 class=&quot;text-center&quot; [ngStyle]=&quot;{&#39;visibility&#39;: loading ? &#39;visible&#39; : &#39;hidden&#39; }&quot;&gt;使用 ngStyle 加载中..&lt;/h1&gt;
    &lt;h1 *ngIf=&quot;loading&quot; class=&quot;text-center&quot;&gt;使用 *ngIf 加载中..&lt;/h1&gt;
    &lt;h1 *ngIf=&quot;!loading&quot; class=&quot;text-center&quot;&gt;未加载使用 *ngIf..&lt;/h1&gt;
    &lt;app-product-component
      [stringHardCode]=&quot;&#39;硬编码的字符串&#39;&quot;
      [childData]=&quot;parentData&quot;
      *ngFor=&quot;let product of products; let i = index&quot;
      [product]=&quot;product&quot;&gt;
    &lt;/app-product-component&gt;

     **.ts 文件**
    export class AppComponent implements OnInit {
      title = &#39;Angular 应用程序&#39;;
      products: IProduct[] = [];
      parentData: string = &quot;这是父级数据&quot;;
      loading: boolean = true;
      variable: boolean = true;
    
      constructor(private productsService: ProductsService) {}
    
      ngOnInit(): void {
        this.productsService.getProducts().subscribe(products =&gt; {
          setTimeout(() =&gt; {
            this.products = products;
            this.loading = false; 
            this.variable = false;
          }, 2000);
        });
      }
    }
英文:
&lt;h1 class=&quot;text-center&quot; [ngStyle]=&quot;{&#39;visibility&#39;: loading ? &#39;visible&#39; : &#39;hidden&#39; }&quot;&gt;Loading using ngStyle..&lt;/h1&gt;
&lt;h1 *ngIf=&quot;loading&quot; class=&quot;text-center&quot;&gt;Loading using *ngIf..&lt;/h1&gt;
&lt;h1 *ngIf=&quot;!loading&quot; class=&quot;text-center&quot;&gt;Not Loading using *ngIf..&lt;/h1&gt;
&lt;app-product-component
  [stringHardCode]=&quot;&#39;string hardcoded&#39;&quot;
  [childData]=&quot;parentData&quot;
  *ngFor=&quot;let product of products; let i = index&quot;
  [product]=&quot;product&quot;&gt;
&lt;/app-product-component&gt;

 **.ts file**
export class AppComponent implements OnInit {
  title = &#39;Angular Application&#39;;
  products: IProduct[] = [];
  parentData: string = &quot;This is parent data&quot;;
  loading: boolean = true;
  variable: boolean = true;

  constructor(private productsService: ProductsService) {}

  ngOnInit(): void {
    this.productsService.getProducts().subscribe(products =&gt; {
      setTimeout(() =&gt; {
        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 *ngIf指令不起作用,而ngStyle起作用。 (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 =&gt; {
      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 =&gt; {
    setTimeout(() =&gt; {
      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 =&gt; {
      this.products = products;
      this.loading = false;
      this.variable = false;
    });
}

huangapple
  • 本文由 发表于 2023年7月14日 01:50:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/76682055.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定