如果输入后未找到数据，则显示角度消息

Posted 2023-03-13

【中文标题】如果输入后未找到数据，则显示角度消息

【英文标题】：Angular display message if data is not found after input

【发布时间】：2020-09-06 10:03:34

【问题描述】：

我想在用户输入数据编号并单击按钮后从我们的 API 中找不到数据时显示一条消息。

这是我的html

<ion-item>
      <ion-input placeholder="Number" [(ngModel)]="myNum"></ion-input>
      <ion-button (click)="onClick()">UPDATE</ion-button>
    </ion-item>
  </ion-list>



  <ng-container *ngIf="!error; else errorContent">

    <p *ngFor="let order of orders; let i=index;">
      <ion-item *ngIf="i==0">Number : <b> order?.Number </b></ion-item>


    </p>
  </ng-container>
  <ng-template #errorContent>
    <p>
      <span style="color: red;">error</span>
    </p>
  </ng-template>
<ng-template ngif="blank">
    Document Number not Found
  </ng-template>
</ion-content>

这是我的 page.ts，用于显示数据和单击按钮的时间。我尝试为 API 添加一个属性（this.blank）为 null、0 和 length = 0。

    ionViewWillEnter() 
  // Load the data
  this.prepareDataRequest().subscribe( //comment this if you will use Api Url
  //this.dataService.getRemoteData(this.myNum).subscribe( //comment this if you will use local data
    (data:any) => 
      // Takes data into in single Array and print 
      this.actualOrders = data.output.OrderTracking;
      this.orders = data.output.OrderTracking;
      this.blank = data.output.OrderTracking == null |data.output.OrderTracking === 0 || data.output.OrderTracking.length === 0;
    ,
    err => 
      // Set the error information to display in the template
      this.error = `An error occurred, the data could not be retrieved: Status: $err.status, Message: $err.statusText`;
    
  );


onClick () 

    this.dataService.getRemoteData(this.myNum).subscribe( //comment this if you will use local data
      (data:any) => 
        // Takes data into in single Array and print 
        this.orders = data.output.Result.OrderTracking;
        console.log("Remote Data:");
        console.log(data);

    this.blank = data.output.OrderTracking == null |data.output.OrderTrackin === 0 || data.output.OrderTracking.length === 0;
      ,
      err => 
        // Set the error information to display in the template
        this.error = `An error occurred, the data could not be retrieved: Status: $err.status, Message: $err.statusText`;
      
    );
   

【问题讨论】：

你的问题是什么？您是否收到来自 API 的错误？

我只想在我们的 API 中不存在/找不到号码时显示一条消息

您发布的代码似乎运行良好。我不明白你的问题是什么。

就像我说的，我想在我们的 API 中不存在/找不到号码时显示错误消息

我想你的意思是当你的 API 返回空值时，不是吗？

【参考方案1】：

您似乎在 HTML 中使用 ngIf 子句打错了字。

<ng-template ngif="blank"> <!-- <<<-- *ngIf -->
    Document Number not Found
</ng-template>

【讨论】：

这是您的完整 HTM 吗？有一个 </ion-list> 结束标签，但它没有打开（第 5 行）。并且有一个</ion-content> 结束标记，未打开（最后一行）。也许您应该尝试使用简单的<p *ngIf="blank"> 而不是<ng-template *ngIf="blank">，只是为了检查它是否有效。

啊，是的，它不是我的完整 html。用

您是否尝试在<ng-container *ngIf="!error; else errorContent"> 下测试它（我应该说是<p> 或类似的），而不是<ng-template> ？也许模板标签希望触发某种形式的 ID 来显示。

好的，但是检查它是否是框架错误是安全的。您可以尝试以数组样式访问参数，而不是 JSON 方法，例如 this.blank = data["output"]["OrderTracking"] == null | (data["output"]["OrderTrackin"] == 0 || data["output"]["OrderTracking"].length == 0);。有时 Angular 无法识别 JSON 方法，就像在这种情况下，它是 null。

哦，我认为它有效，在构造函数下我需要设置 this.blank = false;而不是真的