ngFor 的异常行为

Question

今天我正在尝试 angular 指令 ngFor。我面临的问题是，当我 select 任何复选框（例如 0）并单击 "next" 时，如果下一个问题也有与我 selected 相同的选项 (0) previous question 然后它会自动检查，我不知道如何？？ [如果任何两个或多个连续的问题没有至少一个相同的选项，则不会出现此行为。 ].我希望这是有道理的。这是我的 plunker

模板：

    {{question}}
    <div *ngFor="let option of options">
      <input type="checkbox">{{option}}<br>
    </div>

  <button (click)="onNext()">next</button>

Component.ts

export class App implements OnInit {
    private questionPaper = {
        questions: [{
                _id: "59d1cbd4f8a709358c045696",
                question: "2 + 3",
                __v: 0,
                answers: [
                    "5"
                ],
                options: [
                    "0",
                    "1",
                    "5",
                    "3",
                    "6"
                ]
            },
            {
                _id: "59d1cbf7f8a709358c045698",
                question: "1 * 3",
                __v: 0,
                answers: [
                    "3"
                ],
                options: [
                    "1",
                    "3",
                    "0",
                    "4"
                ]
            },
            {
                _id: "59d1cc18f8a709358c045699",
                question: "3 - 3",
                __v: 0,
                answers: [
                    "0"
                ],
                options: [
                    "3",
                    "0",
                    "6",
                    "4",
                    "7"
                ]
            },
            {
                _id: "59d1cc3ef8a709358c04569a",
                question: "6 - 4",
                __v: 0,
                answers: [
                    "2"
                ],
                options: [
                    "2",
                    "3",
                    "4",
                    "0",
                    "6"
                ]
            },
            {
                _id: "59d1cc71f8a709358c04569b",
                question: "4 * 8",
                __v: 0,
                answers: [
                    "32"
                ],
                options: [
                    "4",
                    "8",
                    "12",
                    "32",
                    "23"
                ]
            },
            {
                _id: "59d1cc96f8a709358c04569c",
                question: "0 * 1",
                __v: 0,
                answers: [
                    "0"
                ],
                options: [
                    "0",
                    "1",
                    "10",
                    "-1",
                    "4"
                ]
            },
            {
                _id: "59d1cccdf8a709358c04569d",
                question: "6 + 6",
                __v: 0,
                answers: [
                    "12"
                ],
                options: [
                    "6",
                    "12",
                    "21",
                    "0"
                ]
            },
            {
                _id: "59d1fb6a253c5270115f4ced",
                question: "1 + 10",
                __v: 0,
                answers: [
                    "11"
                ],
                options: [
                    "11"
                ]
            }
        ]
    };

    private question;
    private options = [];
    private currentQuesNumber = 1;
    onInit() {}
    constructor() {
        this.question = this.questionPaper.questions[0].question;
        this.options = this.questionPaper.questions[0].options;

    }

    onNext() {

        if (this.currentQuesNumber >= this.questionPaper.questions.length) {
            this.loadQuestion(this.questions.length);

        } else {

            this.currentQuesNumber = this.currentQuesNumber + 1;
            this.loadQuestion(this.currentQuesNumber);

        }
    }



    loadQuestion(quesNumbToLoad) {
        if (quesNumbToLoad > 0 && quesNumbToLoad <= this.questionPaper.questions.length) {
            this.question = this.questionPaper.questions[quesNumbToLoad - 1].question;

            this.options = this.questionPaper.questions[quesNumbToLoad - 1].options;
        }

    }

}

Answer 1

这是缩进行为，因为 angular 重新使用 ngForOf 指令中的 DOM 元素以获得更好的性能，基于 对象标识 的价值。所以在你的例子中，值是一个 string，这意味着 object identity 是它的值。

因此，如果问题之间选项的值相同，angular 将重用 DOM 元素。因为使用了相同的 DOM 元素，所以复选框状态仍然是 checked.

如果您希望 angular 不在 ngForOf 指令中重用 DOM 元素，您必须提供一个函数，该函数始终returns 某种独特的 id（ 例如当前日期时间 ）并将其应用于 ngForOf 指令的 ngForTrackBy 输入（短-语法 trackBy).

例如：

组件

public trackById(index: number, value: any) {
  return Date.now();
}

组件模板

*ngFor="let option of options;trackBy:trackById"

或：

<ng-template ngFor let-option [ngForOf]="options"[ngForTrackBy]="trackByFn">
</ng-template>

现在 angular 不再为此 ngForOf 指令重用任何 DOM 元素。

有关 ngForOf 指令的更改传播的更多信息，请参见 docs （以及其他一些有用的内容）。

Note: This also works also the opposite way. For example if you have some immutable data and you don't want new DOM elements to be created on every change. Just provide a function which returns the current index of the item. This will force angular into reusing every existing DOM-element inside your ngForOf-directive regardless of the object identity.

ngFor 的异常行为

Unusual behaviour of ngFor

typescript

ngfor

angular