Angular Изменение / замена значения в строке на основе выбора пользователя

Question

Я работаю над шаблоном письма-предложения, который заменит / изменит Dynami c Точки данных, такие как Имя, Адрес, Роль, Зарплата и т. Д. c на основе кандидата, выбранного из списка кандидатов. Существует фиксированный синтаксис для динамических c точек данных, т.е. они будут заключены в <<>>, например:

Welcome to the family, <<Name>> 
You will be paid <<Salary>> for the duration of your employment. 

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

Это фиктивный массив, который я создал с 1 шаблоном. В реальном приложении у меня может быть много шаблонов с разными clauseNames, поэтому я ищу постоянное исправление. . Файл TS, Список шаблонов:

[{

    templateId: 1,
    templateName: "Offer",
    clauses: [
      {
        clauseName: "Introduction",
        clauseId: 1,
        texts: [
          {
            text: "Hello <<Name>>, Welcome to the Machine",
            textId: 1,
          }]
      },
      {
        clauseName: "Address",
        clauseId: 2,
        texts: [
          {
            text: "<<Address>>",
            textId: 2,
          }]
      },
      {
        clauseName: "Date Of Joining",
        clauseId: 3,
        texts: [
          {
            text: "You can join us on <<DateOfJoining>>",
            textId: 3,
          }]
      },
    ]
  }]

и вот список кандидатов,

  candidateList = [
    { name: "Simba", address: "Some Random Cave" },
    { name: "Doe John", address: "line 4, binary avenue, Mobo" },
    { name: "B Rabbit", address: "8 mile road, Detroit" },
    { name: "Peter Griffin", address: "Spooner Street" },
    { name: "Speedy Gonzales", address: "401, hole 34, Slyvester Cat Road" },
    { name: "Morty", address: "Time Machine XYZ" },
    { name: "Brock", address: "pokeball 420, Medic center" },
  ]

Answer 1

Вы можете использовать регулярные выражения для замены таких заполнителей, таких как:

var result = text.text.replace(/\<\<(.*?)\>\>/g, function(match, token) {
       return candidate[token.toLowerCase()];
    });

Один из способов включить это в ваш дисплей - создать свойство, которое возвращает форматированный текст.

I обновил ваш стекблиц здесь .

Answer 2

Взгляните на это демо

Я изменил логи c в следующем методе:

  showTeplate(name,address,doj) {
    this.clauseList = [];
    for (let a of this.templateList) {
      if (a.clauses != null) {
        for (let cl of a.clauses) {
          const tempObj = JSON.parse(JSON.stringify(cl));
          tempObj.texts.forEach(textObj => {
            textObj.text = textObj.text.replace("<<Name>>",name);
            textObj.text = textObj.text.replace("<<Address>>",address);
            textObj.text = textObj.text.replace("<<DateOfJoining>>",doj);
          })
          this.clauseList.push(tempObj)

        }
      }
    }
    console.log("Clause list", this.clauseList)
  }