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

Question

我需要创建一个文本区域来显示数据，它应该如下所示（预期行为）：

这是我当前的 UI（当前行为）：

这是我的 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 将文本区域更改为使用终端（固定宽度字体）有望解决问题。

Changing The Font Of Text Area

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

How to format or style text in textarea?

html

javascript

css

textarea

angular