我想添加 Camera1/2/3/... 值以插入到 HTML 表单 SRC 标签中。请查看我的代码示例。我正在使用离子框架，打字稿
打字稿：
public condicion:boolean;//condicion
constructor(public navCtrl: NavController, private contactProvider: ContactProvider, public toastCtrl: ToastController,private smsVar: SMS) {
this.contactProvider.getAll()
.then((result) => {
this.contacts = result;
let answer = this.contacts.map(x=> {
let {name2, name3, name4} = x.contact;
let obj = {name2,name3,name4}
return obj
})
this.GroupKey= answer.map(({ name2}) => name2);
this.ApiKey= answer.map(({ name4}) => name4);
this.MonitorId = answer.map(({ name3}) => name3);
//console.log(answer)
this.Camara1=this.ApiKey[0]+"/mjpeg/"+this.GroupKey[0]+"/"+this.MonitorId[0];
this.Camara2=this.ApiKey[1]+"/mjpeg/"+this.GroupKey[1]+"/"+this.MonitorId[1];
this.Camara3=this.ApiKey[2]+"/mjpeg/"+this.GroupKey[2]+"/"+this.MonitorId[2];
this.Camara4=this.ApiKey[3]+"/mjpeg/"+this.GroupKey[3]+"/"+this.MonitorId[3];
console.log(this.Camara1);
});
}
HTML：
<ion-row>
<ion-col>
<iframe src="http://publicIP:4545/+'Camara1'" scrolling="no"></iframe>
</ion-col>
<ion-col>
<iframe src="http://publicIP:4545/+'Camara2'" scrolling="no"></iframe>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<iframe src="http://publicIP:4545/+'Camara3'" scrolling="no"></iframe>
</ion-col>
<ion-col>
<iframe src="http://publicIP:4545/+'Camara4'" scrolling="no"></iframe>
</ion-col>
</ion-row>
我建议将url作为传递给您的iframe. 所以在你的打字稿中你会有：
const baseUrl = `http://publicIP:4545/`
// Other code
....
this.Camara4=this.ApiKey[3]+"/mjpeg/"+this.GroupKey[3]+"/"+this.MonitorId[3];
this.Camara4Url = `${baseUrl}${this.Camara4}`
然后将其绑定到您的HTML文件中：
<ion-row>
<ion-col>
<iframe [src]="Camara4Url" scrolling="no"></iframe>
</ion-col>
</ion-row>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句