使用Angular HTML的Cordova Email Composer插件无法呈现

Question

我刚刚开始为我的Ionic应用程序使用Cordova Email Composer插件，并且发现该插件看起来不支持Angular HTML代码？我想知道是否可能对此问题有替代方案，或者我做错了什么？

Page.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { EmailComposer } from '@ionic-native/email-composer';

import { ReapService } from '../../services/reap-service';
@IonicPage()
@Component({
  selector: 'page-offline-data',
  templateUrl: 'offline-data.html',
})
export class OfflineDataPage {
  private offlineData:any [] =[];
  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public storage: Storage,
              public viewCtrl: ViewController,
              private emailComposer: EmailComposer,
              public reap: ReapService) {
  }
  ionViewDidLoad(){
    this.storage.get('offlineSubmission').then((data)=>{
        this.offlineData=data;
        console.log(data);
    });
  }
  dismiss() {
    this.viewCtrl.dismiss();
  }
  sendEmail(){
    this.emailComposer.isAvailable().then((available: boolean) =>{
     if(available) {
       //Now we know we can send
     }
    },(err) => {
      this.reap.presentToast('Error Emailing Data');
    });

    let email = {
      to: 'email@email.com',
      cc: 'email@email.com',
      //bcc: ['john@doe.com', 'jane@doe.com'],
      attachments: [
        //'file://img/logo.png',
        //'res://icon.png',
        //'base64:icon.png//iVBORw0KGgoAAAANSUhEUg...',
        //'file://README.pdf'
      ],
      subject: 'Test',
      body: `
      <div *ngFor="let data of offlineData;let i = index">

        <div *ngIf="data?.Type=='GPS'">
          <h1>{{i+1}}</h1>
          <h2 class="bold">Form - {{data?.Type}}</h2>
          <p>Well ID - {{data?.Info[0].ID}}</p>
          <p>Lat - {{data?.Info[1]['Lat']}}</p>
          <p>Lon - {{data?.Info[2].Lon}}</p>
        </div>


        <ion-card-content *ngIf="data?.Type=='Project'">
          <h1>{{i+1}}</h1>
          <h2 class="bold">Form - {{data?.Type}}</h2>
          <p>Project Name - {{data?.Info[0].project.projectName}}</p>
          <p>Location - {{data?.Info[0].project.Location.Location}}</p>
          <p>Company Man - {{data?.Info[0].project.companyMan}}</p>
          <p>AFE - {{data?.Info[0].project.orderNumber}}</p>
        </ion-card-content>

        <ion-card-content *ngIf="data?.Type=='WO'">
          <h1>{{i+1}}</h1>
          <h2 class="bold">Form - Work Order</h2>
          <p>Project - {{data?.Info[0].wo[0].project.Name}}</p>
          <p>Location - {{data?.Info[0].wo[0].Location.Location}}</p>
          <p>Company Man - {{data?.Info[0].wo[0].companyMan}}</p>
          <p>Current Date - {{data?.Info[0].wo[0].currentDate}}</p>
          <p>AFE - {{data?.Info[0].wo[0].workOrder}}</p>
          <p>Foreman - {{data?.Info[0].wo[0].foreman}}</p>
          <p>Start Time - {{data?.Info[0].wo[0].startTime}}</p>
          <p>End Time - {{data?.Info[0].wo[0].endTime}}</p>
          <p>Representative - {{data?.Info[0].wo[0].representative}}</p>
          <p>Job Description - {{data?.Info[0].wo[0].description}}</p>

          <br>
          <h2 class="bold">Sub Form - Equipment</h2>
          <br>
          <div *ngFor="let subData of data.Info[4].Equipment">
          <p>Name - {{subData?.Name}}</p>
          <p>Starting Odometer - {{subData?.Odometer}}</p>
          <p>Ending Odometer - {{subData?.endingOdometer}}</p>
          <br>
          </div>

          <br>
          <h2 class="bold">Sub Form - Labor</h2>
          <br>
          <div *ngFor="let subData of data.Info[5].Labor">
          <p>Empoloyee - {{subData?.FullName}}</p>
          <p>Hours - {{subData?.Hours}}</p>
          <br>
          </div>

          <br>
          <h2 class="bold">Sub Form - Extra Labor</h2>
          <br>
          <div *ngFor="let subData of data.Info[9].extraLabor">
          <p>Name - {{subData?.Name}}</p>
          <p>Hours - {{subData?.Hours}}</p>
          <br>
          </div>

          <br>
          <h2 class="bold">Sub Form - Misc.</h2>
          <br>
          <div *ngFor="let subData of data.Info[6].Misc">
          <p>Description - {{subData?.description}}</p>
          <p>Quantity - {{subData?.quantity}}</p>
          <br>
          </div>

          <br>
          <h2 class="bold">Sub Form - Job Description</h2>
          <br>
          <div *ngFor="let subData of data.Info[7].JobDescription">
          <p>Job Description - {{subData?.jobDescription.ItemDescription}}</p>
          <p>Quantity - {{subData?.quantity}}</p>
          <p>Hours/Days/Cost - {{subData?.each}}</p>
          <br>
          </div>
          </ion-card-content>
      </ion-card>
      `,
      isHtml: true
    };

    // Send a text message using default options
    this.emailComposer.open(email);
    }
}

在插件上一切正常，唯一的是html代码看起来像这样，

任何建议，以使它起作用。

Answer 1

如果要放置“周围的​​文本，请确保在注入变量之前也将其关闭”。您的HTML可以正常工作，但是因为您没有在变量之前关闭'，所以它被当作字符串处理。

以代码的以下部分为例：

body: `
  <div *ngFor="let data of offlineData;let i = index">

    <div *ngIf="data?.Type=='GPS'">
      <h1>{{i+1}}</h1>
      <h2 class="bold">Form - {{data?.Type}}</h2>
      <p>Well ID - {{data?.Info[0].ID}}</p>
      <p>Lat - {{data?.Info[1]['Lat']}}</p>
      <p>Lon - {{data?.Info[2].Lon}}</p>
    </div>

在body标签之后，有一个“ 这意味着此后的所有内容都将被视为字符串，因此javascript不会处理该页面中的任何javascript，因为它本身会生成它。 更好的做法是在生成文本时在文本中注入变量，或者使用包含HTML代码的模板文件。

body: `
  <div *ngFor="let data of offlineData;let i = index">

    <div *ngIf="data?.Type=='GPS'">
      <h1>'+ {{i+1}} +'</h1>
      <h2 class="bold">Form - '+ {{data?.Type}} +'</h2>
      <p>Well ID - '+ {{data?.Info[0].ID}} +'</p>
      <p>Lat - '+ {{data?.Info[1]['Lat']}} +'</p>
      <p>Lon - '+ {{data?.Info[2].Lon}} +'</p>
    </div>