Нужен способ разделить 5 баллов на 2 утверждения

Question

У меня есть следующая «проблема».Мне нужен способ в Angular (6) разделить 5 пунктов на 2 утверждения для каждого вопроса.Всего 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

Самый простой и быстрый способ сделать это - исключить ответы из массива в другой.

Вам понадобятся 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 2

ммм ... это похоже на два связанных раскрывающихся списка.Представьте, что у вас есть массив объектов типа

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}"

Answer 3

Вы можете отфильтровать возможные значения RatingValues ​​onChange, чтобы никогда не было видимого значения, которое позволило бы вам превысить максимальное значение.

total = 0;
max = 5;

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