打印过滤后的数组（对象） ionic4/angular

Question

我不明白如何以离子角度将数据从 .ts 页面传递到 .html 页面。

数组：

this.s1mstatus = [
  {
  "code" : "01",
  "descr" : "Text1."
  },
  {
  "code" : "02",
  "descr" : "Text2."
  },
  {
  "code" : "03",
  "descr" : "Text3."
  }
]

HTML 页面

<ion-content fullscreen>
  <ion-grid>
    <ion-row>
      <ion-col>
          <ion-item [ngClass]="roundedInput" class="roundedInput">
              <ion-input type="text" placeholder="Enter M-Status Code" [(ngModel)]="s1mstatus_get" maxlength="2"></ion-input>
              <ion-button type="submit" (click)="mstatussend()">Submit</ion-button>
          </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col>
        <ion-item class="roundedInput">
            <ion-input type="text" placeholder="Enter M-Data Code" [(ngModel)]="s1mdata_get"></ion-input>
            <ion-button type="submit" (click)="mstatussend()">Submit</ion-button>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-list  *ngFor="let s1ms of s1filtered">
    <ion-card class="card-border">
      <ion-card-header>
        <ion-card-subtitle>M-STATUS: {{s1ms.code}}</ion-card-subtitle>
        </ion-card-header>
        <ion-card-content>
          <p>ERROR MESSAGE:</p>
          <p class="ion-black" [innerHTML]="s1ms.descr"></p>
        </ion-card-content>
    </ion-card>
  </ion-list>
</ion-content>

检查是否为空，如果不是则“做某事”的功能：

mstatussend() {
   if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
     this.roundedInput = 'invalid';
   }
   else if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
     this.roundedInput = 'invalid';
   }
   else {
     this.roundedInput = 'valid';
     var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
     console.log(s1filtered);
   }
 };

正如您在屏幕截图中看到的，console.log 命令有效，但我不明白如何在 HTML 页面上打印这些值，也许这很简单，但让我抓狂。

Answer 1

当你在你的方法中声明变量时，这个变量在 HTML 模板中是看不到的：

var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);

所以你需要创建一个HTML模板可以看到的变量：

打字稿：

s1filtered: any; // The variable that can be seen for HTML template

mstatussend() {
   if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
     this.roundedInput = 'invalid';
   }
   else if(this.s1mstatus_get=="" || this.s1mstatus_get==undefined){
     this.roundedInput = 'invalid';
   }
   else {
     this.roundedInput = 'valid';
     this.s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
     console.log(this.s1filtered);
   }
 };

HTML：

<ng-container *ngIf="s1filtered && s1filtered.length > 0">
   <ion-list  *ngFor="let s1ms of s1filtered">
       <!-- The other code is omitted for the brevity -->
   </ion-list>
<ng-container>