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

【问题标题】：how to show message when I use *ngIf in html using typescript当我使用打字稿在 html 中使用 *ngIf 时如何显示消息
【发布时间】：2018-04-06 12:37:51
【问题描述】：

我在使用 *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 中使用 *ngIf="prod !== 0" 时显示 No result! 当我有结果时。当 prod 为空时，我想要此消息。

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

拜托，你能建议任何解决方案吗

编辑：

当 prod 有结果时：

  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);

        }
      });
  }

【问题讨论】：

=== 进行严格的类型检查，请改用==。

标签： angular typescript angular-ng-if

【解决方案1】：

其他答案已经部分正确，但您需要做更多工作才能使其发挥作用，而且评论太多了。
首先，按照建议，您要检查阵列的长度

<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
          }
        );
      }
    );
  }

【讨论】：

运算符 '==' 不能应用于类型 'Products' 和 'strings' --> 在我的代码中显示
这是一个打字错误。您对 this.ws.product 返回的内容的定义可能没有涵盖没有产品时它是字符串的情况。
Observable<Product> 应该是 Observable<Product[]>。然后，而不是这个return new Product(null);，只返回一个空数组。

【解决方案2】：

除非它是一个字符串，否则使用 ==

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

根据问题，您应该使用 prod.length，因为 prod 是一个数组。

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

【讨论】：

对我来说没有变化。当我写
没有结果时没有任何反应！
当
没有结果！
显示此消息
在控制台中显示此错误。错误错误：找不到“字符串”类型的不同支持对象“无结果”。 NgFor 只支持绑定到 Arrays 等 Iterables。

【解决方案3】：

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

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

【讨论】：

【解决方案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>

【讨论】：