Еще в мои самые первые дни с 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 для создания раскрывающегося списка для отображения параметров, сгруппированных по типу.
<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>
Пока... вроде работает. Шаблоны сгруппированы по типу и прекрасно отображаются в раскрывающемся списке. Ниже выделения находится текстовая область, в которой должно отображаться значение «Тело». Также отлично работает, при выборе шаблона из раскрывающегося списка текст отображается в текстовой области.
Проблема, с которой я столкнулся, заключается в том, что есть поле ввода для имени человека, которому будет отправлено сообщение. Я получаю имя следующим образом:
<input type = "text" [(ngModel)] = "srcName" class = "form-control" placeholder = "Name">
Меня немного смущает то, как получить/добавить имя человека в сообщение с помощью интерполяции? Я надеялся на что-то вроде простого изменения текста в JSON и добавления к нему интерполяции, но, видимо, это не работает, хе-хе.
{
"Id": 1,
"Type": "SR Templates",
"Name": "Message 1",
"Body": "Dear {{srcName}, Some meaningful text here"
}
Я искал вверх и вниз, но в конечном итоге застрял и отчаянно нуждаюсь в толчке в том направлении, в котором мне нужно было бы пойти, чтобы на самом деле вставить это имя в текстовую область вместе с шаблоном из массива...
Вы можете создать функцию, которая объединяет выбранный вами шаблон и введенное вами имя, например:
onSubmit() {
this.message = `Dear ${this.srcName}, ${this.selectedTemplate}`;
}
И тогда вы можете добавить кнопку, которая выполняет эту функцию:
<button (click) = "onSubmit()">Submit</button>
Теперь всякий раз, когда вы выбираете нужный шаблон, добавляете имя, которое хотите, и нажимаете кнопку «Отправить», вы получаете объединенное сообщение с нужной вам информацией.
Вот живая демонстрация, если вам нужно больше объяснений.
В живой демонстрации использовался обычный HTML-выбор, но он должен работать так же и с угловым выбором материала.
##РЕДАКТИРОВАТЬ
Если вам нужно поместить 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)
}
Я также добавил изменения в живую демонстрацию.
Отлично, это идет в очень хорошем направлении. Нужно найти способ адаптировать это, чтобы я мог иметь сообщения, в которых имя пользователя находится как бы в середине предложения :)
@Toto как в середине тела шаблона?
Да. Теоретически srcName может появляться в разных позициях. Например, «Привет, srcName, я получил вашу почту, но не мог ответить вам раньше» или что-то вроде «Привет, Дженни, это Тото из TAC, и я получил srcName со мной по телефону для нашего сеанса Webex.
@Toto, вам нужно будет указать заполнитель внутри вашего шаблона, что-то вроде "Guess what? Exactly {srcName} , some even more..blahhh"
, а затем заменить его с помощью replace()
, которая является функцией javascript, я постараюсь помочь вам с этим завтра
@Toto Я добавил для вас больше объяснений, пожалуйста, не забудьте проголосовать, если это было полезно, и примите ответ, если это правильный ответ :)
Спасибо за обновление. Работает прелесть, просто нужно немного изменить мой HTML-шаблон электронной почты, чтобы переместить (щелчок) на более подходящую кнопку. Также пошел и приковал еще несколько замен, чтобы учесть еще больше лени. Обидно, однако, что он не будет работать прямо из коробки, используя интерполяцию :)
@ Тото, ты всегда можешь спросить меня, нужна ли тебе помощь :), голосование тоже было бы здорово, спасибо
Пытался проголосовать... к сожалению, «голоса, отданные теми, у кого репутация менее 15, записываются, но не изменяют общедоступный рейтинг публикации».
Как только вы получите
srcName
, как вы решите, в какой объект массива вы будете вносить изменения?