Angular // ng-select Использовать интерполяцию в текстовой области для текста, извлеченного из массива

Еще в мои самые первые дни с 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"
}

Я искал вверх и вниз, но в конечном итоге застрял и отчаянно нуждаюсь в толчке в том направлении, в котором мне нужно было бы пойти, чтобы на самом деле вставить это имя в текстовую область вместе с шаблоном из массива...

Как только вы получите srcName, как вы решите, в какой объект массива вы будете вносить изменения?

Nicholas K 12.12.2020 18:14
Структурированный массив Numpy
Структурированный массив Numpy
Однако в реальных проектах я чаще всего имею дело со списками, состоящими из нескольких типов данных. Как мы можем использовать массивы numpy, чтобы...
T - 1Bits: Генерация последовательного массива
T - 1Bits: Генерация последовательного массива
По мере того, как мы пишем все больше кода, мы привыкаем к определенным способам действий. То тут, то там мы находим код, который заставляет нас...
Что такое деструктуризация массива в JavaScript?
Что такое деструктуризация массива в JavaScript?
Деструктуризация позволяет распаковывать значения из массивов и добавлять их в отдельные переменные.
1
1
403
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете создать функцию, которая объединяет выбранный вами шаблон и введенное вами имя, например:

  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 12.12.2020 21:15

@Toto как в середине тела шаблона?

Elmehdi 12.12.2020 21:17

Да. Теоретически srcName может появляться в разных позициях. Например, «Привет, srcName, я получил вашу почту, но не мог ответить вам раньше» или что-то вроде «Привет, Дженни, это Тото из TAC, и я получил srcName со мной по телефону для нашего сеанса Webex.

Toto 12.12.2020 22:46

@Toto, вам нужно будет указать заполнитель внутри вашего шаблона, что-то вроде "Guess what? Exactly {srcName} , some even more..blahhh", а затем заменить его с помощью replace(), которая является функцией javascript, я постараюсь помочь вам с этим завтра

Elmehdi 12.12.2020 23:40

@Toto Я добавил для вас больше объяснений, пожалуйста, не забудьте проголосовать, если это было полезно, и примите ответ, если это правильный ответ :)

Elmehdi 13.12.2020 11:41

Спасибо за обновление. Работает прелесть, просто нужно немного изменить мой HTML-шаблон электронной почты, чтобы переместить (щелчок) на более подходящую кнопку. Также пошел и приковал еще несколько замен, чтобы учесть еще больше лени. Обидно, однако, что он не будет работать прямо из коробки, используя интерполяцию :)

Toto 13.12.2020 16:18

@ Тото, ты всегда можешь спросить меня, нужна ли тебе помощь :), голосование тоже было бы здорово, спасибо

Elmehdi 13.12.2020 16:29

Пытался проголосовать... к сожалению, «голоса, отданные теми, у кого репутация менее 15, записываются, но не изменяют общедоступный рейтинг публикации».

Toto 13.12.2020 16:55

Другие вопросы по теме