Question

使用* ngIf时有点问题

我的ws给了我所有产品，当ws让我'没有结果'时我想在我的页面中显示此消息。为此，我尝试这段代码：

products: Product[]=[];
  getallproduct() {
    this.activatedRoute.params.subscribe(
      params => {
        this.ws.product(params['id']).subscribe(
          products=> {
            this.prod= products;
            console.log(products) // show all product or No result
          }
        );
      }
    );
  }

在hmtl中，我使用此代码获取了我的所有产品：

 <table *ngFor="let item of prod">
 <p *ngIf="prod === 0"> No result! </p>
 <tr>
   <td>{{item.id}}<td>
   <td>{{item.name}}<td>
 </tr>
 </table>

当我在html中使用*ngIf="prod === 0"时，没有任何事情发生。当我有结果时，我在html show No result！中使用*ngIf="prod !== 0"。当prod为空时我想要这条消息。

{StatusCode: 0, StatusMessage: "OK", StatusDescription: "No result"}

请您能否提出任何解决方案

编辑：

当产生结果时：

  public product(id: string): Observable<Product> {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');
    let urlSearchParams = new URLSearchParams();
    urlSearchParams.append('id', id);
    urlSearchParams.append('token', this.auth.getCurrentUser().token);
    let body = urlSearchParams.toString();

    return this.http.post(Api.getUrl(Api.URLS.product), body, {
      headers: headers
    })
      .map((response: Response) => {
        let res = response.json();
        console.log(res)
        if (res.StatusCode === 0) {
          return res.StatusDescription;
        } else {
          return new Product(null);

        }
      });
  }

Answer 1

除非它的字符串使用==

<p *ngIf="prod == 0"> No result! </p>

基于这个问题，你应该使用prod.length，因为prod是一个数组。

<p *ngIf="prod.length == 0"> No result! </p>

Answer 2

prod是一个数组，而不是数字。

您应该检查*ngIf="prod.length === 0"

Answer 3

其他答案已经部分正确，但您需要做更多工作才能使其发挥作用，并且需要做出很多评论。首先，根据建议你要检查arry的长度

<p *ngIf="prod.length == 0"> No result! </p>

但为了使其可见，你需要把它放在for循环之外。

<p *ngIf="prod.length == 0"> No result! </p>
<table *ngFor="let item of prod">
    <tr>
        <td>{{item.id}}<td>
        <td>{{item.name}}<td>
    </tr>
</table>

接下来，如果你不给它一个数组，for循环将会中断。在您的情况下，如果没有结果，StatusDescription是一个字符串。您需要为此添加一个检查。

getallproduct() {
    this.activatedRoute.params.subscribe(
      params => {
        this.ws.product(params['id']).subscribe(
          products=> {

            this.prod = products == 'No result' ? [] : products;
            console.log(products) // show all product or No result
          }
        );
      }
    );
  }

Answer 4

**You can try this**

**TS:**
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = '';
  prod = [
    {id: 1, name: 'karthi'},
    {id: 2, name: 'vijay'},
  ];
}


**HTML:**
<div *ngIf="prod.length">
<table *ngFor="let item of prod">
 <tr>
   <td>{{item.id}}<td>
   <td>{{item.name}}<td>
 </tr>
 </table>
</div>
<p *ngIf="!prod.length"> No result! </p>

当我在html中使用打字稿时使用* ngIf时如何显示消息

4 个答案: