输入点击，添加类Angular 8

Question

我有一个数组，它产生一组问题。它将它们显示为单选按钮。

这是HTML

          <div *ngSwitchCase="'radio'">
            <ul>
              <li
                *ngFor="let option of question.options"
                class="col-12 col-sm-6 p-0 purchase-type"
              >
                <input
                  class="form-control"
                  id="{{ option.id }}"
                  formControlName="{{ question.name }}"
                  value="{{ option.value }}"
                  type="radio"
                  (click)="clickEvent()" 
                  [ngClass]="status ? 'success' : 'danger'"
                />
                <label for="{{ option.id }}" class="btn btn-choice {{ option.class }}">
                  <span class="hidden-xs">{{ option.id }} </span
                  ><span class="hidden-xs"> (</span> {{ option.label
                  }}<span class="hidden-xs">)</span></label
                >
              </li>
            </ul>
          </div>

.ts中的布尔值

  status: boolean = false;
  clickEvent() {
    this.status = !this.status;
  }

因为这是一个数组，所以我很难在每个数组之间切换一个类。此时，当我选择任何单选按钮时，所有的单选按钮元素都会应用相同的类。

我如何才能仅将此应用于单击的单选按钮？

对Angular来说还是个新手。感谢任何帮助或建议。

提前感谢

Answer 1

也许这会对你有帮助

<input
    class="form-control"
    id="{{ option.id }}"
    formControlName="{{ question.name }}"
    value="{{ option.value }}"
    type="radio"
    (click)="clickEvent($event)"  // add $event here
    [ngClass]="status ? 'success' : 'danger'"
/>

并在你的组件中注入渲染。确保根据状态变量检查您的条件

  constructor(private renderer: Renderer2) { }

  clickEvent(event: any) {
    this.status ? 
    this.render.addClass(event.target,"active") : 
    this.render.removeClass(event.target,"active"); // set your class here
  }

Answer 2

如果您想在切换(选择)后设置单选按钮的样式，有几种方法可以做到这一点。一种方法如下所示。

侦听formControl Value

<input [formControlName]="radio" value="value" [ngClass]="form.controls.get('radio').value == 'value' ? 'active' : 'inactive'"></input>

您还可以将无线输入转换为组件。

组件

然后给它一个通用的模板引用，并检查它是否被选中。

(警告:这可能会有点复杂，因为您必须向下传递formControlName和fromGroup，无论是作为输入还是实现controlValueAccessor)

<input #radio [ngClass]="radio.checked ? 'active' : 'inactive'"></input>

或者你也可以在typescript中调用一个函数来解析它。

函数

<input [formControlName]="radio" value="value" [ngClass]="checked(value) ? 'active' : 'inactive'"></input>

checked(value) {
    if(value == this.form.control['radio'].value) {
        return true
    } else {
        return false
    }

}

我相信还有其他更整洁的方法，但希望上面的方法能有所帮助。