THe issue is with this line in html <p id="name">{{found.knownname}}</p> and
ionViewDidEnter(){
for(var i of this.newcases){
if(i.firstname.includes(this.name) || i.middlename.includes(this.name) || i.lastname.includes(this.name)){
this.name=document.getElementById("knownname")
this.name.style.background="grey"
}
}
}
home.html
<ion-header>
<hr>
</ion-header>
<ion-content>
<ion-toolbar no-border-top >
<ion-segment [(ngModel)]="victims" color="list">
<ion-segment-button value="found">
Found
</ion-segment-button>
<ion-segment-button value="missing">
Missing
</ion-segment-button>
<ion-segment-button value="closed">
Closed
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<div [ngSwitch]="victims">
<ion-list *ngSwitchCase="'found'">
<div
*ngFor = "let found of founds"
ion-item color="light"
(click)="foundModal(found)">
<ion-avatar item-start>
<img [src]="found.image">
</ion-avatar>
<p id="name">{{found.knownname}}</p>
</div>
</ion-list>
<ion-list *ngSwitchCase="'missing'">
<button *ngFor = "let missing of newcases" ion-item color="light" (click)="missingModal(missing)">
<ion-avatar item-start>
<img [src]="missing.image">
</ion-avatar>
<p>{{missing.firstname}} {{missing.lastname}}</p>
</button>
</ion-list>
<div *ngSwitchCase="'closed'">
<div>
<ion-toolbar no-border-top >
<ion-segment [(ngModel)]="closedcases" color="list">
<ion-segment-button value="foundclosed">
Found-Closed
</ion-segment-button>
<ion-segment-button value="missingclosed">
Missing-Closed
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<div [ngSwitch]="closedcases">
<ion-list *ngSwitchCase="'foundclosed'">
<ion-item *ngFor = "let closed of closedfound" ion-item color="light">
<ion-avatar item-start>
<img [src]="closed.image">
</ion-avatar>
<p>{{closed.knownname}}</p>
</ion-item>
</ion-list>
</div>
<div [ngSwitch]="closedcases">
<ion-list *ngSwitchCase="'missingclosed'">
<ion-item *ngFor = "let closed of closedmissing" ion-item color="light">
<ion-avatar item-start>
<img [src]="closed.image">
</ion-avatar>
<p>{{closed.firstname}} {{closed.lastname}}</p>
</ion-item>
</ion-list>
</div>
</div>
</div>
</div>
<ion-fab left bottom>
<button ion-fab mini color="list" (click)="reportCase()"><ion-icon name="add"></ion-icon></button>
</ion-fab>
</ion-content>
home.ts
import { Component } from '@angular/core';
import { NavController, ModalController, NavParams } from 'ionic-angular';
import { Http } from "@angular/http"
import { FoundProfilePage } from "../found-profile/found-profile";
import { MissingProfilePage } from "../missing-profile/missing-profile";
import { ApiProvider } from "../../providers/api/api";
import { CaseAgent } from "../../schemas/caseagent";
import { ReportPage } from "../report/report";
import { NewCase } from "../../schemas/newcase";
import { ClosedMissing } from "../../schemas/closedmissing";
import { ClosedFound } from "../../schemas/closedfound";
import { Found } from "../../schemas/found";
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage{
founds:Found[];
found:Found;
newcases:NewCase[];
newcase:NewCase;
closedmissing:ClosedMissing[];
closedfound:ClosedFound[];
items;
foundData;
missingData;
closedData;
victims:any = "found";
closedcases:any="foundclosed";
foundInformation:any;
missingInformation:any;
closedInformation:any;
name:any;
constructor(
public navParams:NavParams,
public navCtrl:NavController,
private http: Http,
public modalCtrl:ModalController,
private apiProvider:ApiProvider
){}
//Load Data
ionViewDidLoad(){
this.apiProvider.getCase()
.subscribe(newcases=>{
this.newcases = newcases.data
})
this.apiProvider.getClosedMissing()
.subscribe(closedMissing=>{
this.closedmissing=closedMissing.data;
})
this.apiProvider.getClosedFound()
.subscribe(closedFound=>{
this.closedfound=closedFound.data
})
this.apiProvider.getFoundCase()
.subscribe(foundCase=>{
this.founds = foundCase.data
})
console.log(this.newcases)
}
//Matching Module
ionViewDidEnter(){
for(var i of this.newcases){
if(i.firstname.includes(this.name) || i.middlename.includes(this.name) || i.lastname.includes(this.name)){
this.name=document.getElementById("knownname")
this.name.style.background="grey"
}
}
}
//Modals
foundModal(found){
let modal = this.modalCtrl.create(FoundProfilePage,found)
modal.present()
}
missingModal(missing){
let modal = this.modalCtrl.create(MissingProfilePage,missing)
modal.present()
}
reportCase(){
let modal = this.modalCtrl.create(ReportPage);
modal.present()
}
}
api.ts //my provider
import { Injectable } from '@angular/core';
import { Http,Headers, Response } from '@angular/http';
import { CaseAgent } from "../../schemas/caseagent";
import { NewCase } from "../../schemas/newcase";
import { ClosedMissing } from "../../schemas/closedmissing";
import { ClosedFound } from "../../schemas/closedfound";
import { CareOf } from "../../schemas/careof";
import { Found } from "../../schemas/found";
import 'rxjs/add/operator/map';
@Injectable()
export class ApiProvider {
data:any;
constructor(
public http: Http){}
//retrieve
getCaseAgents(){
return this.http.get("http://localhost:3000/api/caseagent")
.map(res=>res.json());
}
getCase(){
return this.http.get("http://localhost:3000/api/missing")
.map((res:Response)=>res.json());
}
getClosedMissing(){
return this.http.get("http://localhost:3000/api/closedmissing")
.map((res:Response)=>res.json());
}
getClosedFound(){
return this.http.get("http://localhost:3000/api/closedfound")
.map((res:Response)=>res.json());
}
getFoundCase(){
return this.http.get("http://localhost:3000/api/found")
.map(res=>res.json())
}
getCareOf(){
return this.http.get("http://localhost:3000/api/careof")
.map(res=>res.json())
}
//add
addCaseAgent(newCaseAgent){
var headers = new Headers();
headers.append("Accept","application/json");
headers.append("Content-Type","application/json");
return this.http.post("http://localhost:3000/api/caseagent",newCaseAgent,{headers:headers})
.map(res=>res.json())
}
addCase(newCase){
var headers = new Headers();
headers.append("Content-Type","application/json");
return this.http.post("http://localhost:3000/api/missing",newCase,{headers:headers})
.map(res=>res.json())
}
addClosedMissing(newClosedMissing){
var headers = new Headers();
headers.append("Content-Type","application/json");
return this.http.post("http://localhost:3000/api/closedmissing",newClosedMissing,{headers:headers})
.map(res=>res.json())
}
addClosedFound(newClosedFound){
var headers = new Headers();
headers.append("Content-Type","application/json");
return this.http.post("http://localhost:3000/api/closedfound",newClosedFound,{headers:headers})
.map(res=>res.json())
}
//remove
deleteMCase(id){
return this.http.delete("http://localhost:3000/api/missing/"+id)
.map(res=>res.json)
}
deleteFCase(id){
return this.http.delete("http://localhost:3000/api/found/"+id)
.map(res=>res.json)
}
}