如何使用typescript将组件变量值插入到html src标记中

Question

我想添加要插入HTML表单SRC标记的Camera1 / 2/3 / ...值。请查看我的代码示例。我正在使用Ionic Framework，Typescript

打字稿：

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>

Answer 1

我建议将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>