Question

我有以下“问题”。我需要在Angular（6）中为每个问题在2条陈述中划分5分。总共有40个问题，所以有80个陈述。

示例：如果用户在第一条语句中选择了3个点，则第二条语句应自动仅包含2个点，其余部分应被禁用或删除，尽管用户应该能够然后在第一条语句上选择不同数量的点，第二条语句应再次更改。

示例图片：

当前的HTML代码：

<form [formGroup]="ratingGroup">
    <ng-container *ngFor="let questionData of questionsArr; let i = index;" formArrayName="ratings">
        <section [@visibilityChanged]="(currentQuestion == i + 1) ? 'shown' : 'hidden'" [id]="'question-' + (i + 1)">

            <div class="row">

                <div class="col-12">

                    <p class="small">Divide 5 points over the next 2 statements<br />
                        You do not click on anything for 0 points.</p>

                </div>

                <div class="col-12" *ngFor="let question of questionData; let index = index;">
                    <p>{{ question.order }}) {{ question.text }}</p>
                    <fieldset class="rate" [formArrayName]="i">

                        <p class="float-left">Strongly disagree</p>
                        <p class="float-right">Strongly agree</p>

                        <label [for]="'rate' + ratingValue + '-' + question.id" title="Excellent" *ngFor="let ratingValue of ratingValues" [ngClass]="{blue: checker.checked}">
                            <input [id]="'rate' + ratingValue + '-' + question.id" type="radio" [name]="index"  [value]="{rating: ratingValue, type: question.type}" (change)="onChange(ratingValue, index); setBlue($event)" [formControlName]="index" #checker>
                        </label>
                    </fieldset>

                </div>

                <div class="col-12">

                    <button class="back" [hidden]="currentQuestion == 1" (click)="previousQuestion()" pageScroll [href]="'#question-' + (currentQuestion - 1)">Back</button> <button (click)="nextQuestion()" pageScroll [href]="'#question-' + (currentQuestion + 1)">Next</button>

                </div>

            </div>

        </section>
 </ng-container>
 </form>

打字稿：

ratingValues = [5, 4, 3, 2, 1];

get ratings () {
        return this.ratingGroup.get('ratings') as FormArray;
    }

    private buildForm(): void {

        this.ratingGroup = this.formBuilder.group({
            ratings: this.formBuilder.array([this.formBuilder.array([
                this.formBuilder.control('', [Validators.required]),
                this.formBuilder.control('', [Validators.required])
            ])])

        });

    }

    getQuestions(): void {
        this.questionService.getQuestions();

        this.questionService.getQuestions().subscribe(response => {
            let order = 0;
            for (let i = 0; i < response.length; i++) {
                if (!(i % 2)) {
                    this.questionsArr[order] = response.slice(i, i+2);
                    order++;
                    this.ratings.push(this.formBuilder.array([
                        this.formBuilder.control('', [Validators.required]),
                        this.formBuilder.control('', [Validators.required])
                    ]));
                }
            }

            console.log(this.questionsArr);
        });
    }

Answer 1

您可以过滤可能的ratingValues onChange，这样就永远不会有一个可见的值可以超过最大值。

total = 0;
max = 5;

onChange(ratingValue, index) {
    this.total += ratingValue;
    this.ratingValues = this.ratingValues.filter((val) => val + total <= max)
}

Answer 2

最简单，最快捷的方法是从数组中排除答案。

您将需要3个变量：

all: string[] = ['Strongly agree', 'Agree', 'Neutral', 'Disagree', 'Strongly disagree'];
selected: string[] = [];
get available() {
  return this.all.filter(s => this.selected.some(s1 => s !== s1));
}

JavaScript示例：

const all = ['Strongly agree', 'Agree', 'Neutral', 'Disagree', 'Strongly disagree'];
const selected = [];
function available() {
  return selected.length ? all.filter(s => !selected.includes(s)) : [];
}

selected.push(all[0], all[2]);

console.log(selected);
console.log(available());

<button onclick="console.log(available())">Show available</button>
<div class="answers">
  
</div>

您需要做的就是回答每个问题，更改selected数组的值。 available吸气剂将相应更新。

Answer 3

uhmmm ...看起来像两个相关的下拉菜单。假设您有一个像这样的对象数组

options=[{values:[]},
 {values:[1]},
 {values[1,2]},
 {values[1,2,3]}
....]

您只需要做一个

<div *ngFor="let value of options[myForm.get('control').value-1]">

或

<div *ngFor="let value of [1,2,3,4,5] 
   [ngClass]="{'disabled':options[myForm.get('control').value-1].indexOf(value)<0}"

需要一种将5分除以2条陈述的方法

3 个答案: