javascript - 使用 Typescript Angular 动态替换字符串

Question

我正在尝试创建一封录取通知书，它将某些占位符替换为从列表中选择的候选人的详细信息。我被指示不要使用jquery或JS，这意味着我不能使用$或document.getelementbyId。我仍然是一个学习者，所以我需要帮助才能用纯打字稿编写 thi 代码。无论如何，这里是细节： -

我创建了一个带有子句的虚拟模板列表，每个子句都有一个与之关联的文本

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

我的任务是将模板列表（包括<<>>）文本中夹在<<>>之间的字符串替换为我从候选人列表中单击的候选人的姓名或地址。

这是 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>

我还想知道是否有人可以告诉我这是否可以作为动态数据点的示例。这是一个https://stackblitz.com/edit/angular-ntu3lm

请帮我解决一下这个。

标签： javascriptangularstringtypescript

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 函数。