javascript - 如何在不重复应用它的元素的情况下使用 "ngFor"？

Question

抱歉，我不能在这里发布所有代码。但是，如果你能给我一些关于需要做什么的提示，我将不胜感激。
让我试着解释一下我的困境。
所以，这是我一直在尝试使用的代码片段 ngFor和 ngIf上:

<li class="list-group-item" *ngFor="let option of question.options">
          <div class="form-check lead">
            <input
              class="form-check-input"
              type="checkbox"
              value=""
              id="{{ option.id }}"
              [(ngModel)]="option.selected"
              (change)="onSelect(question, option)"
              disabled="disabled"
            />
            <label
              class="form-check-label d-block fw-normal"
              [attr.for]="option.id"
            >
              {{ option.name }}
              <ng-container *ngFor="let obj of response"
                ><fa-icon
                  *ngIf="
                    obj.qId == option.questionId && obj.correct.includes(option.id)
                  "
                  [icon]="faCheck"
                ></fa-icon
              ></ng-container>
            </label>
            <div>
              <img
                src="{{ option.image }}"
                alt=""
                onerror="this.onerror=null; this.remove();"
                width="55"
                height="55"
              />
            </div>
          </div>
        </li>

在这段代码之前有这个元素， <div class="d-flex flex-column bg-white px-5" *ngFor="let question of filteredQuestions" style="white-space: pre-line"> filteredQuestions()加载有问题的对象数组，在问题内部，有 options 的数组.
现在，我想要显示 check正确选项旁边的图标。
这是 response大批:

response = [
{ qId: '60e57c069107a038085ae3a1', correct: [1001, 1002] },
{ qId: '60e57cc09107a038085ae3a2', correct: [1002] },
{ qId: '60e57d289107a038085ae3a3', correct: [1003] },
{ qId: '60e57d9e9107a038085ae3a4', correct: [1001, 1002, 1003] },
{ qId: '60e57e7c9107a038085ae3a5', correct: [1004] }];

这是选项的整体结构:

[{id: number;
  questionId: number;
  name: string;
  image: string;
  selected: boolean;}]

我尝试使用 ngFor在不同的标签上，但没有运气。目前，没有基于 fa-icon 标签上的 if 条件的检查图标。
当我删除 ngIf在这种情况下，从 fa-icon 标签中，支票只会打印多次。我在哪里可以应用标签，这样元素就不会重复并且我可以获得我想要的输出？

Answer 1

问题是您的 option.id不是数字，所以这个 obj.correct.includes(option.id)不满意，不符合您的*ngIf以下代码行中的条件:

<fa-icon *ngIf="obj.qId == option.questionId && obj.correct.includes(+option.id)" [icon]="faCheck"></fa-icon>

解决问题的简单方法是把 +在 option.id 旁边:

obj.correct.includes(+option.id)

<ng-container *ngFor="let obj of response">
    <fa-icon *ngIf="obj.qId == option.questionId && obj.correct.includes(+option.id)" [icon]="faCheck"></fa-icon>
</ng-container>

Here是工作样本
结果: