Angular // ng-select 在文本区域内对从数组中提取的文本使用插值

Question

在我刚开始接触 Angular 和运行的时候，我仍然无法解决问题。我想要完成的是创建一种将人名添加到消息模板的方法。

模板是从这样的文件加载的

this.http.get('../../assets/templatefiles/customtemplates.json').subscribe(data => {this.templateArray = data as any [];

JSON文件结构如下

[{
    "Id": 1,
    "Type": "SR Templates",
    "Name": "Message 1",
    "Body": "Some meaningful text here"
},
{
    "Id": 2,
    "Type": "SR Templates",
    "Name": "Message 2",
    "Body": "Some more meaningful text here"
},
{
    "Id": 3,
    "Type": "GTFO Templates",
    "Name": "Message 3",
    "Body": "Guess what? Exactly, some even more..blahhh"
}]

到目前为止一切都很好。然后，在我的模板中，我使用 ng-select 创建下拉列表以显示按 Type

分组的选项

<ng-select [items]="templateArray"
              bindLabel="Name"
              bindValue="Body"
              groupBy="Type"
              [(ngModel)]="selectedTemplate"
              >
    
        <ng-template ng-optgroup-tmp let-item="item">
          <strong>{{item.Id}}</strong>
        </ng-template>
    </ng-select>

到目前为止...似乎工作正常。模板按类型分组并显示在下拉列表中就好了。 selection 下面是一个文本区域，其中应该显示“Body”值。工作正常，当 select 从下拉菜单中选择模板时，文本在文本区域中显示正常。

我面临的问题是有一个输入字段，用于输入消息将发送到的人名。我得到的名字如下：

 <input type="text" [(ngModel)]="srcName" class="form-control"  placeholder="Name">

我有点困惑的是如何使用插值 get/add 消息中的人名？我希望有一些东西，比如只需要更改 JSON 中的文本并向其中添加插值，但显然这不起作用呵呵。

{
    "Id": 1,
    "Type": "SR Templates",
    "Name": "Message 1",
    "Body": "Dear {{srcName}, Some meaningful text here"
}

我一直在上下搜索，但最终还是卡住了，我迫切希望在我必须去的方向上轻推，以实际将该名称与数组中的模板一起插入到文本区域中。 .

Answer 1

您可以制作一个函数，将您的 selected 模板和您输入的名称连接起来，如下所示：

  onSubmit() {
    this.message = `Dear ${this.srcName}, ${this.selectedTemplate}`;
  }

然后你可以添加一个执行这个功能的按钮：

<button (click)="onSubmit()">Submit</button>

现在，只要您 select 您想要的模板并将您想要的名称添加到输入中并单击提交按钮，您就会收到一条包含您想要的信息的串联消息。
如果您需要更多解释，请点击这里 a live demo。
在现场演示中，a 使用了正常的 HTML select，但它应该与 angular material select.

相同

##编辑

如果您需要将 srcName 放在模板主体中，则必须在模板主体中创建一个占位符，例如：

"Guess what? Exactly {srcName}, some even more..blahhh"

而不是：

"Guess what? Exactly, some even more..blahhh"

那么你将不得不改变onSubmit函数：

  onSubmit() {
    this.message = this.selectedTemplate.replace('{srcName}', this.srcName)
  }

我也将更改添加到现场演示中。

Angular // ng-select 在文本区域内对从数组中提取的文本使用插值

Angular // ng-select Use interpolation within a textarea on a text pulled from an array

arrays

string

json

string-interpolation

angular