Calling a TypeScript function in HTML?-CodePudding

I'm doing an Angular project, and I have two simple methods in a typescript file as see:

findForm(text: string, forms: Array<string>){

    for (let form of this.forms) {
      if (text.includes(form)) {
        return form;
      }
    }

  }

formatText(text: string, word: string) {

  let new_text: string;
  let word_at: number = text.indexOf(word);
  let word_length: number = word.length;
  let part1: string = text.substr(0, word_at);
  let part2: string = text.substr(word_at   word_length, text.length - 1);

  new_text = part1   "<b>"   word   "<b>"   part2;

  return new_text;

  }

and now I'm trying to call these two methods in an HTML file:

        <div class="mb-3" *ngFor="let sentence of category.sentences">
            <li>
                {{formatText({{sentence}},{{findForm({{sentence}},{{forms}})}})}}
            </li>
        </div>

where {{form}} is an array from the same typescript file

However, I get this error even I put two arguments not one:

Expected 2 arguments, but got 1. in both methods

Parser Error: Unexpected token {, expected identifier, keyword, or string at column 13 in [ {{formatText({{sentence}},{{findForm({{sentence}},{{forms}})}})}} ] in C:\Users\User\eclipse-workspace\sentences\sentences.component.html@10:16

the error in the line of:

{{formatText({{sentence}},{{findForm({{sentence}},{{forms}})}})}}

I'm not sure I called the method in the right way but when I put notmal string argument the method works like this:

formatText(sentence,findForm(sentence,forms));

CodePudding user response：

Simply do not repeat the double curly braces once you have opened a pair. You are already within an interpolation.

            <li>
                {{formatText(sentence, findForm(sentence,forms))}}
            </li>