Динамическая замена строк с использованием Typescript Angular

Question

Я пытаюсь создать письмо с предложением, которое заменит определенные заполнители сведениями о кандидате, выбранном из списка. Мне было приказано не использовать jquery или JS, что означает, что я не могу использовать $ или document.getelementbyId . Я все еще учусь, поэтому мне нужна помощь в написании кода на чистом машинописи. В любом случае, вот подробности: -

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

  templateList = [{

    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" },
  ]

Моя задача - заменить строку, помещенную между << >> в тексте списка шаблонов (<< >> в комплекте), именем или адресом кандидата i щелкнули по списку кандидатов.

Вот HTML:

<div style="display: block;">
    <button (click)="showTeplate()">Show template</button>
</div>
<hr /><br />
<div class="row">
    <div class="col-4">
        <ul>
            <ol *ngFor="let x of candidateList">
                <a>{{x.name}}</a><br />
                <a><small>{{x.address}}</small></a>
                <hr />
            </ol>
        </ul>
    </div>
    <div class="col-8">
        <div class="templateDiv">
            <div *ngFor="let temp of clauseList">
                <span><strong class="textTemp">{{temp.clauseName}}</strong></span>
                <br/>
                <div *ngFor = "let x of temp.texts">
                    <p class="txt">{{x.text}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

Мне также было интересно, кто-нибудь может сказать мне, может ли это быть примером динамических c точек данных. Вот https://stackblitz.com/edit/angular-ntu3lm

Пожалуйста, помогите мне с этим.

Answer 1

Компонент приложения.ts

candidateList = [
        { name: "Simba", address: "Some Random Cave", dateOfJoin: "5/4/2019" },
        { 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" }
      ];

      clauseList: Object[] = [];

      showTeplate(name: string, address: string, dateOfJoin: string) {
        this.clauseList = [];
        for (let template of this.templateList) {
          if (template.clauses != null) {
            for (let clause of template.clauses) {
              this.setClauseText(clause, address, name, dateOfJoin);
              this.clauseList.push(clause);
            }
          }
        }
        console.log("Clause list", this.clauseList);
      }

      setClauseText(clause: any, address, name, dateOfJoin) {
        let text = clause.texts[0].text;
        if (clause.clauseName === "Introduction") {
          const nameToReplace = this.getTextName(text);
          if (name !== undefined) {
            clause.texts[0].text = text.replace(nameToReplace, name.concat(","));
          } else clause.texts[0].text = text.replace(nameToReplace, "N/A");
        } else if (clause.clauseName === "Address") {
          if (address !== undefined)
            clause.texts[0].text = text.replace(text, address);
          else clause.texts[0].text = text.replace(text, "N/A");
        } else if (clause.clauseName === "Date Of Joining") {
          const dateOfJoinToReplace = this.getTextDateOfJoin(text);
          if (dateOfJoin !== undefined)
            clause.texts[0].text = text.replace(dateOfJoinToReplace, dateOfJoin);
          else clause.texts[0].text = text.replace(dateOfJoinToReplace, "N/A");
        }
        console.log("ClasueText ==", clause.texts[0].text);
      }

      getTextName(text: string) {
        const splitArray = text.split(" ");
        if (splitArray[2].includes(",")) 
          return splitArray[1] + " " + splitArray[2];
        else return splitArray[1];
      }

      getTextDateOfJoin(text: string) {
        const splitArray = text.split(" ");
        return splitArray[5];
      }

Компонент приложения. html

<hr /><br />
<div class="row">
    <div class="col-4">
        <ul>
            <ol *ngFor="let x of candidateList">
                <a (click)="showTeplate(x.name,x.address,x.dateOfJoin)">{{x.name}}</a><br />
                <a (click)="showTeplate(x.name,x.address,x.dateOfJoin)"><small>{{x.address}}</small></a>
                <hr />
            </ol>
        </ul>
    </div>
    <div class="col-8">
        <div class="templateDiv">
            <div *ngFor="let temp of clauseList">
                <span><strong class="textTemp">{{temp.clauseName}}</strong></span>
                <br/>
                <div *ngFor = "let x of temp.texts">
                    <p class="txt">{{x.text}}</p>
                </div>
            </div>
        </div>
    </div>
</div>

Я изменил ваш код, в конкретный способ функции showTemplate.

Answer 2

Я изменил функцию showTemplate, теперь, если вы добавляете что-то в cluase, это работает, но невозможно, не знаю, как называются пункты.

showTeplate(name: string, address: string, dateOfJoin: string) {
    this.clauseList = [];
    let tempList = new Array<any>();
    tempList = JSON.parse(JSON.stringify(this.templateList));
    for (let template of tempList) {
      if (template.clauses != null) {
        for (let clause of template.clauses) {
          this.setClauseText(clause, address, name, dateOfJoin);
          this.clauseList.push(clause);
        }
      }
    }
    console.log("Clause list", this.clauseList);
  }

  setClauseText(clause: any, address, name, dateOfJoin) {
    let text = clause.texts[0].text;
    if (clause.clauseName === "Introduction") {
      const nameToReplace = this.getText(text);
      if (name !== undefined) {
        clause.texts[0].text = text.replace(nameToReplace, name.concat(","));
      } else clause.texts[0].text = text.replace(nameToReplace, "N/A");
    } else if (clause.clauseName === "Address") {
       const addressToReplace = this.getText(text);
      if (address !== undefined)
        clause.texts[0].text = text.replace(addressToReplace, address);
      else clause.texts[0].text = text.replace(text, "N/A");
    } else if (clause.clauseName === "Date Of Joining") {
      const dateOfJoinToReplace = this.getText(text);
      if (dateOfJoin !== undefined)
        clause.texts[0].text = text.replace(dateOfJoinToReplace, dateOfJoin);
      else clause.texts[0].text = text.replace(dateOfJoinToReplace, "N/A");
    }
    console.log("ClasueText ==", clause.texts[0].text);
  }

  getText(text: string) {
    const splitArray = text.split(" ");
    for (let elementSplit of splitArray)
      if (elementSplit.includes("<<")) return elementSplit;
  }
}