Angular 8：如何在沒有 html 標簽的情況下使用 ngFor。 我試過 ng-container 但它不起作用

Question

在我遇到很多問題之后，我創建了以下想法來填補我的 angular 項目中的空白問題。 下面顯示的對象來自 API，我想像下面提到的那樣循環它。 我無法使用ng-container標簽而不是span因為它會產生折舊的 html 標簽問題。 原因是，我在數組中提到的標簽不會在同一個對象中關閉，它將被命名為字段的給定數組的下一個或下一個對象關閉。 我的意思是，如果第0個訂單的值是<p>my text而第1訂單的值將is this </p> 。

以下代碼有效

            <div *ngIf="fill.type == 'lines'" >
              <span *ngFor="let f of fill.field">

                <span *ngIf="f.word_type == 'word'" [innerHTML]="makeSanitize(f.word)"></span>
                <span *ngIf="f.word_type == 'blank'"><input type="text" (keyup)="updateinput($event, f, miniq)" value="" [class.bg-success]="f.myanswer == f.word && miniq.answered && miniq.verified" [class.bg-danger]="f.myanswer != f.word && miniq.answered && miniq.verified" /></span>

              </span>
            </div>

但是下面的代碼給出了一些錯誤

            <div *ngIf="fill.type == 'lines'" >
              <ng-container *ngFor="let f of fill.field">

                <ng-container *ngIf="f.word_type == 'word'" [innerHTML]="makeSanitize(f.word)"></ng-container>
                <ng-container *ngIf="f.word_type == 'blank'"><input type="text" (keyup)="updateinput($event, f, miniq)" value="" [class.bg-success]="f.myanswer == f.word && miniq.answered && miniq.verified" [class.bg-danger]="f.myanswer != f.word && miniq.answered && miniq.verified" /></ng-container>

              </ng-container>
            </div>

這個循環的 JSON 響應是

type: "lines",
field:

      0: {word: "<p>during table - "
          word_type: "word"
          myanswer: ""},
      1: {word: "apple"
          word_type: "blank"
          myanswer: ""},
      2: {word: " answer1</p>
          ↵
          ↵<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;- answer2</p>
          ↵
          ↵<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;- "
          word_type: "word"
          myanswer: ""},
      3: {word: "orange"
          word_type: "blank"
          myanswer: ""},
      4: {word: " answer3</p>
          ↵
          ↵<p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;- test 
          answer4</p>"
          word_type: "word"
          myanswer: ""}

任何人都請幫助我如何在沒有標簽的情況下使用它或如何使ng-container工作

Answer 1

您不能綁定到innerHTML因為它不是ng-container的屬性，因為錯誤消息已經表明。 改用數據綁定，應該可以解決問題。 ( {{ makeSanitize(f.word) }} )

            <ng-container *ngIf="f.word_type == 'word'">{{ makeSanitize(f.word) }}</ng-container>
            <ng-container *ngIf="f.word_type == 'blank'">
                <input type="text" (keyup)="updateinput($event, f, miniq)" value="" [class.bg-success]="f.myanswer == f.word && miniq.answered && miniq.verified" [class.bg-danger]="f.myanswer != f.word && miniq.answered && miniq.verified" />
            </ng-container>

          </ng-container>

Answer 2

將 ng-container 更改為 ng-template。

<div *ngIf="fill.type == 'lines'" >
              <ng-container *ngFor="let f of fill.field">

                <ng-template [ngIf]="f.word_type == 'word'" [innerHTML]="makeSanitize(f.word)"></ng-template>
                <ng-template [ngIf]="f.word_type == 'blank'"><input type="text" (keyup)="updateinput($event, f, miniq)" value="" [class.bg-success]="f.myanswer == f.word && miniq.answered && miniq.verified" [class.bg-danger]="f.myanswer != f.word && miniq.answered && miniq.verified" /></ng-template>

              </ng-container>
            </div>