如何从 safeHtml 获取 div 的 ID？

Question

我有一个 html 保存在数据库中，这是我从 API 调用中获得的。这是回应

例如

htmlText = <div class="dragBlock"> 
                <div id="Name">Test</div>
                 <div id="Age">23</div>
           </div>

鉴于我将其显示为

<div class="preview">
    <div [innerHtml] = "htmlText | safeHtml"> </div>
 </div>

这很好用，但我想更改内部 Html 的 id 姓名和年龄

我在 ts 文件中这样做

document.getElementById('Name').innerHtml = 'UserName';

但这不起作用，我们可以在 Angular 中这样做吗？如果是怎么办？

Answer 1

你需要这样使用它：

document.getElementById('Name').innerHTML = 'UserName';

查看此 Stackblitz：https://stackblitz.com/edit/angular-sbxeon?file=src%2Fapp%2Fapp.component.ts

Answer 2

您可以使用管道来操纵 HTML。

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';
  
  @Pipe({
    name: 'modify'
  })
  export class ModifyPipe implements PipeTransform {
  
    constructor(private _domSanitizer: DomSanitizer) {}
  
    transform(html: string, args?: any): any {
      return this._domSanitizer.bypassSecurityTrustHtml(this.modify(html));
    }
  
    private modify(html: string): string {
      // Do your manipulation here by replacing with regex
      return string;
    }
  
  }


  <p [innerHTML]="htmlText | modify"></p>

如何从 safeHtml 获取 div 的 ID？

How to get id of a div from safeHtml?

javascript

innerhtml

typescript

angular