Добавить HTML-код без использования innerHTML или insertAdjacentHTML

Question

Как я могу отобразить данные с помощью файла ts без помощи innerHTML

const object = {
  piece: 11,
  amount: 2200,
  quantity: 33,
};

this.summaryResult =  `<a class= "nav-Invoice">
  <div>
     <span class="fl" >` + object.piece + `</span>
     <span class="fr" >` + object.quantity + `</span>
     <div class="clearfix"></div>
  </div>
  <span class="divblock">
      <b>$ ` + object.amount + `</b>
  </span>
</a>`

HTML-файл: -

{{summaryResult}}

Результат: -

       11                     33
                2200

Answer 1

Вы действительно должны сделать это с некоторыми шаблонами Angular, вместо того чтобы думать об использовании объекта innerHTML.

summary.component.ts:

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html'
})
export class SummaryComponent {
  public object = {
    piece: 11,
    amount: 2200,
    quantity: 33, 
  };

  constructor() {}

  /* Your object logic here */
}

summary.component.html:

<a *ngIf="object" class="nav-Invoice">
  <div>
     <span class="fl">{{ object.piece }}</span>
     <span class="fr">{{ object.quantity }}</span>
     <div class="clearfix"></div>
  </div>
  <span class="divblock">
      <b>$ {{ object.amount }}</b>
  </span>
</a>

Два файла должны находиться в одной папке, а компонент должен быть объявлен в угловом модуле.

Answer 2

Вы также можете создать DOM в файле ts.

в файле HTML:

<div #inputBox><div>

в файле ts:

const object = {
  piece: 11,
  amount: 2200,
  quantity: 33,
};

const aTag = document.createElement('a');

const innerDivTag = document.createElement('div');

const spanPiece = document.createElement('span');
const spanQuantity = document.createElement('span');
const clearFixDiv = document.createElement('div');

spanPiece.innerHTML = object.piece;
spanQuantity .innerHTML = object.quantity;
innerDivTag.appendChild(spanPiece);
innerDivTag.appendChild(spanQuantity);
innerDivTag.appendChild(clearFixDiv);
aTag.appendChild(innerDivTag);

const outerSpan = document.createElement('span');
outerSpan .innerHTML = object.amount;
aTag.appendChild(outerSpan);

this.inputBox.nativeElement.appendChild(aTag);