如何在 textarea 中格式化或设置文本样式？

Question

我需要创建一个 textarea 来显示数据，它应该是这样的（预期行为）：

这是我当前的用户界面（当前行为）：

这是我的 HTML：

<textarea disabled class="bgYellow" rows="6">{{text1}}</textarea>

这是我的打字稿代码：

  invoiceNo = '1000799758-00';
  status = 'Spark';
  palletLP = '';
  needAudit = 'NO';

  text1 = 'Invoice No.:  ' + this.invoiceNo + '\n' +
          'Status:  ' + this.status + '\n' +
          'Pallet LP:  ' + this.palletLP + '\n' +
          'Audit?:  ' + this.needAudit;

谁能告诉我如何让这个发票编号标签左对齐，数据右对齐。 它就像 Bootstrap 网格样式，但我不知道该怎么做。

Answer 1

使用单个反引号：

 text1 = `
Invoice No, : 1
Status      : 2
Pallet LP   : 3
...         : 4`
}

https://stackblitz.com/edit/angular-aewrtv?file=src/app/app.component.ts

Answer 2

将您的代码更改为

text1 =  ' Invoice No.: ' + this.invoiceNo + '\n' +
      '      Status: ' + this.status + '\n' +
      '   Pallet LP: ' + this.palletLP + '\n' +
      '      Audit?: ' + this.needAudit;

然后使用css更改文本区域以使用终端（固定宽度字体）有望解决问题。

更改文本区域的字体