如何呈现从ion-content内的API加载的html

Question

I'm opening a modal this way:

const modal:HTMLIonModalElement =
   await this.modalController.create({
      component: ModalLoteinfoPage,
      componentProps: {
         pageBody:pageBodyLoadedFromAPI
      }
});

Then I'm trying to put the content pageBody as HTML inside ion-content

<ion-content>

  <div [innerHTML]="{{pageBodyLoadedFromAPI}}"></div>

</ion-content>

So I'm getting this error:

Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{pageBody}}] in ng:///ModalLoteinfoPageModule

What exactly this error means? How can I achieve that?

Answer 1

If you use binding [] you don't have to use interpolation {{}}, only the variable name.

<div [innerHTML]="pageBodyLoadedFromAPI"></div>

You have to use interpolation if you don't use binding

<div innerHTML="{{pageBodyLoadedFromAPI}}"></div>

Answer 2

pageBodyLoadedFromAPI is a angular variable. No need for {{}}

<div [innerHTML]="pageBodyLoadedFromAPI"></div>