拼写检查，突出显示拼写错误的单词，对Angular表单组的建议

问：

在 Angular 中创建我自己的拼写检查服务

• 这是我的

<mat-form-field appearance="outline" class="mat-field-full-width">
 <mat-label>MOC Title (Min 15 and Max 150 characters)</mat-label>
  <input spellcheck="true" (input)="checkSpelling()" formControlName="moctitle" matInput placeholder="Enter Title Here" #moctitle required minlength="15" maxlength="150" rows="1">
  <span class="form-text text-muted"><code>{{moctitle.value.length}}/150</code></span>
</mat-form-field>

• 这是我使用 checkSpelling（） 的 ts 文件

  checkSpelling(text: string): void {
    this.spellcheckerService.checkSpelling(text);
    this.misspellings = this.spellcheckerService.getMisspellings();
    this.highlightedText = this.spellcheckerService.highlightMisspelledWords();
    console.log(this.misspellings);
    console.log(this.highlightedText)
    // Call getSuggestions for each misspelled word
    this.suggestions = this.misspellings.reduce((suggestions, misspelledWord) => {
      const wordSuggestions = this.spellcheckerService.getSuggestions(misspelledWord);
      return suggestions.concat(wordSuggestions);
    }, [] as string[]); // Provide an initial value as an empty array
    console.log(this.suggestions)
  }

• 我想要的是，我想在输入中的文本中突出显示拼写错误的单词，当我单击该单词时，我想显示建议，我还有一个 showsuggestions（） 函数。请帮帮我

• 以下是我目前正在使用的代码

<!-- Display the highlighted text -->
- this is how i m showing misspelled values but instead of this i want this inside Above formcontrol 
<div [innerHTML]="highlightedText" (click)="showSuggestions($event)"></div>

showSuggestions(event: any): void {

  if (event.target && event.target.classList.contains('misspelled-word')) {

    const misspelledWord = event.target.getAttribute('data-word');

    const suggestions = this.getSuggestions(misspelledWord); // Implement your suggestion logic here

    // Show the suggestions and allow the user to replace the word

    // You can use a dialog, a menu, or another UI element for this.

  }

}