フィルタリングされた配列（オブジェクト）を印刷するionic4 / angular

debugcn 投稿 Dev

ウィリアム・マンザト

イオン角度で.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ページにこれらの値を印刷する方法がわかりませんでした。簡単なことかもしれませんが、気が狂います。

ステップアップ

メソッドで変数を宣言すると、この変数はHTMLテンプレートでは表示されません。

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

したがって、HTMLテンプレートで表示できる変数を作成する必要があります。

TypeScript：

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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]