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>

这两个文件必须位于同一文件夹中，并且必须在Angular模块中声明该组件。

Answer 2

您也可以在ts文件中创建DOM。

在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);

添加HTML代码而不使用innerHTML或insertAdjacentHTML

2 个答案: