Question

因此，我在blanks应用程序中创建了一个简单的填充，并且在字符串中有要用选择框替换的标识符。

打字稿

const string = `##blank.0## is the capital city of China. It's most famous attraction is## blank .1##.`;

ngOnInit() {
  this.answers.forEach(a => {
    this.string = this.sanitizer.bypassSecurityTrustHtml(this.string.replace(`##blank.${a.index}##`,
      `<select class="select-boxes">
      <option *ngFor="let answer of ${a.answers}" [value]="answer.id">
        {{ answer.content }}
      </option>
    </select> `));
  });
}

HTML

<p [innerHTML]="string"></p>

问题

它呈现选择框，但既不显示样式也不显示* ngFor列表。

任何帮助将不胜感激。

Answer 1

在我之前的答案（已删除）之后，您提出了动态渲染的示例。

根据您提供的内容，我进行了一次堆叠闪电战：

https://stackblitz.com/edit/my-angular-starter-xelsuj?file=app/app.component.ts

在这次堆叠闪电战中，您将看到内容是动态的，但仍在Angular上下文中。因此，您仍然可以使用Angular指令，并且不再依赖innerHTML。

export class AppComponent {
  content: SafeHtml;
  str = `##blank.0## is the capital city of China, ##blank.1## is the capital of France.`;
  answers = [{
    ref: 0,
    answers: [
      { id: 0, content: 'Beijing' },
      { id: 1, content: 'Shanghai' },
      { id: 2, content: 'Ghuangzhou' },
      { id: 3, content: 'The Great wall' },
    ],
    bit: undefined,
  }, {
    ref: 1,
    answers: [
      { id: 0, content: 'Stockholm' },
      { id: 1, content: 'New York' },
      { id: 2, content: 'Malibu' },
      { id: 3, content: 'Paris' },
    ],
    bit: undefined,
  }];


  constructor(sanitizer: DomSanitizer) {
    // Split the string into bits
    let bits = this.str.split(/##blank\.\d+##/);
    // remove empty bits (mostly start & end)
    bits = bits.filter(bit => !!bit);
    // Add the bit to the answer
    this.answers = this.answers.map((answer, index) => ({
      ...answer,
      bit: bits[index],
    }));
  }
}

如何在我的角度组件中动态呈现带有样式和* ngFor的HTML选择框？

1 个答案: