Print filtered array(object) ionic4/angular - arrays

Question

I didn't understand how to pass data from .ts page to .html page in ionic angular.
Array:
this.s1mstatus = [
{
"code" : "01",
"descr" : "Text1."
},
{
"code" : "02",
"descr" : "Text2."
},
{
"code" : "03",
"descr" : "Text3."
}
]
HTML page
<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>
FUNCTION TO CHECK IF EMPTY AND "DO SOMETHING" IF ISN'T:
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);
}
};
As You can see by the screenshot the console.log command works but I didn't understand how to print those values on the HTML page, maybe it's something easy but is driving me mad.

Answer 1

When you declare variable in your method, then this variable cannot be seen for HTML template:
var s1filtered = this.s1mstatus.filter(element => element.code == this.s1mstatus_get);
So you need to create a variable that can be seen for HTML template:
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>