Angular 8: как использовать ngFor без тегов html. Я пытался NG-контейнер, но он не работает - PullRequest
Новая
       34

Angular 8: как использовать ngFor без тегов html. Я пытался NG-контейнер, но он не работает

0 голосов
/ 22 января 2020

После того, как я столкнулся с множеством проблем, я создал следующую идею, чтобы заполнить пробелы в моем проекте angular. Объекты, показанные ниже, получают из API, и я хочу l oop, как показано ниже, как я упоминал. Я не могу использовать тег ng-container вместо span, потому что это создает устаревшую проблему html тегов. Причина этого: теги, которые я упомянул в массиве, которые не будут закрываться в том же объекте, и он будет закрыт следующим или следующим из следующего объекта данного массива с именем field. Я имею в виду, если 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>

enter image description here

JSON Ответ этого l oop равен 

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 работать

Ответы [ 2 ]

0 голосов
/ 22 января 2020

Изменить ng-контейнер на 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>
0 голосов
/ 22 января 2020

Невозможно выполнить привязку к 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>
...