主页 / 问题 / 930774
Accepted
Вячеслав
Asked:2020-01-11 12:25:46 +0000 UTC2020-01-11 12:25:46 +0000 UTC

如何根据条件使 <material-radio> 不活动？

  • 772

有4组，每组4个。这是一个测试的 UI 组件，其中用户必须为 4 个问题中的每一个选择一个从 1 到 4 的分数（这里是该测试的模拟）。在这种情况下，总分不应超过 10 分。因此，我想让那些不活动，选择它们将导致不满足这个条件（就像上面显示的测试一样）。

例如，如果用户在前两行中选择了等级 4 和 4，那么在接下来的两个块中，应该让 1 个收音机处于活动状态。

这是模板代码：

<div>
    <div class="skillrow">{{skill_P}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_P">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>

<div>
    <div class="skillrow">{{skill_A}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_A">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>

<div>
    <div class="skillrow">{{skill_E}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_E">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>

<div>
    <div class="skillrow">{{skill_I}}</div>
    <div class="radiorow">
        <material-radio-group [(ngModel)]="selected_I">
            <material-radio *ngFor="let item of skillScore" [value]="item">
                {{ item }}
            </material-radio>
        </material-radio-group>
    </div>
</div>
angular2

1 个回答

  1. Best Answer

    为了解决您的问题，我将首先创建一个模型：

    export class Skill {
  //Имя навыка или код для дальнейшей обработки
  name: string;
  //Текущее значение
  value: number;
  //Какое значение может принять
  available: number;

  constructor(name: string) {
    this.name = name;
    this.value = 0;
    this.available = 4;
  }
}

    在 Angular Material 上制作的示例。但我认为，逻辑会很清楚。我会在一个循环中制作一个模板，因为所有元素对你来说都是一样的：

    <div class="skill" *ngFor="let skill of skills">
    <div class="skillrow">{{ skill.name }}</div>
    <div class="radiorow">
        <mat-radio-group [(ngModel)]="skill.value" (change)="onChange()">
            <mat-radio-button 
              *ngFor="let item of [1, 2, 3, 4]" [value]="item"
              [disabled]="skill.available < item"
              >
                {{ item }}
            </mat-radio-button>
        </mat-radio-group>
    </div>
</div>

    在组件本身中，我们初始化技能数组：

    const skillNames = ['Умение 1', 'Умение 2', 'Умение 3', 'Умение 4'];
skills: Skill[] = [];
ngOnInit() {
  skillNames.forEach((name) => {
    this.skills.push(new Skill(name));
  });    
}

    添加聚合器字段：

      total: number = 0; // содержит общее количество баллов
  touched: number = 0; // содержит количество уже выбранных опций

    在 option 中的选择更改事件上，我们创建了一个简单地调用其他两个的函数：

      onChange():void {
    this.calculateTotal();
    this.checkAvailability();
  }

    第一个遍历技能数组并计算我们分配给聚合器的值：

      private calculateTotal():void {
    let total = 0;
    let touched = 0;

    this.skills.forEach((skill: Skill) => {
      total += skill.value
      if (skill.value) {
        touched++;
      }
    });
    this.total = total;
    this.touched = touched;
  }

    第二个计算有效值，遍历技能数组，并为每个元素分配一个可用字段：

      private checkAvailability(): void {
    let available = 10 - this.total - (4 - this.touched);
    this.skills.map((skill: Skill) => {
      if (skill.value === 0) {
        skill.available = available + 1;
      } else {
        skill.available = available + skill.value;
      }     
    });
  }

    这是一个工作示例https://stackblitz.com/edit/slrv-mat-radio-conditions

    • 2

相关问题