ng

Question

今天我正在尝试角度指令ngFor。我面临的问题是，当我选择任何复选框（例如0）并点击“下一步”时，如果下一个问题也有我在上一个问题中选择的相同选项（0）那么它将自动检查，我不知识？？ [如果任何两个或更多连续问题没有改变同一选项，则不会出现此行为。 ]。我希望它有意义。这是我的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会根据值的对象标识，重新使用其中的DOM元素＆{39}}指令以获得更好的性能。因此，在您的情况下，值为字符串，这意味着对象标识是其值。

因此，如果选项的值在问题之间相同，则 angular 会重用DOM元素。由于使用了相同的DOM元素，因此复选框状态仍然是已检查。

如果你希望 angular 不在ngForOf - 指令中重用DOM元素，你必须提供一个总是返回某种unqiue id的函数（例如当前日期时间）并将其应用于ngForOf - 指令的ngForTrackBy输入（短语法ngForOf）。

例如：

<强>组件

trackBy

组件模板

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

或：

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

现在，angular不会重用此<ng-template ngFor let-option [ngForOf]="options"[ngForTrackBy]="trackByFn"> </ng-template> - 指令的任何DOM元素。

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

  

注意：这也是相反的方式。例如，如果您有一些不可变数据，并且您不希望在每次更改时创建新的DOM元素。只需提供一个返回项目当前索引的函数。这将强制 angular 重用ngForOf - 指令中的每个现有DOM元素，而不管对象标识。