Question

这似乎应该是直截了当的，但我看不出我做错了什么。我有一个表单，可以根据是/否单选按钮选择启用某些组件。我试图根据该单选按钮后面的布尔值设置disabled属性。如果我将[禁用]设置为单选按钮，则每个工作都有效（但与所需行为相反）。如果我将[disabled]设置为布尔值的否定，它突然不起作用。我写了一篇Plunker来说明：NegationConditionExample。只需删除＆＃39;！＆＃39;从oResponded变量开始，它将起作用，但与期望的行为相反。

以下是代码：

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule } from '@angular/forms';
import { CommonModule }   from '@angular/common';

@Component({
  selector: 'my-app',
  template: `
    <form (ngSubmit)="onSubmit()" #resolveForm="ngForm">
      <div class="form-group">
        <label> Did anyone respond? </label>
        <div class="radio">
           <label>
              <input type="radio"
                     name="responded"
                     [(ngModel)]="oResponded"
                     #responded="ngModel"
                     value=true> Yes someone responded
          </label>
        </div>
        <div class="radio">
          <label>
              <input type="radio"
                     name="responded"
                     [(ngModel)]="oResponded"
                     #responded="ngModel"
                     value=false> No
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="responseType">What type of response?</label>
        <select class="form-control" id="responseType"
                required
                [(ngModel)]="oResponseType" name="responseType"
                #responseType="ngModel"
                [disabled]="!oResponded">
          <option *ngFor="let i of oResponseTypes" [value]="i">{{i}</option>
        </select>
        <div [hidden]="responseType.valid || responseType.pristine" class="alert alert-danger">
          Response Type is Required
        </div>
      </div>
      oResponded: {{oResponded}}
    </form>
  `,
})
export class App {
  oResponded: boolean;
  oResponseType: string;
  oResponseTypes: string[] = ["Agreed", "Disagreed", "Other"];
  constructor() {
    this.oResponded = false;
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule, CommonModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}`

Answer 1

这是因为更改单选按钮实际上是将oResponded的值设置为字符串类型，而不是布尔值。我在=== false: {{oResponded === "false"}}下方添加了oResponded: {{oResponded}}，您可以在其中看到oResponded是一个布尔值（在构造函数中设置），但切换单选按钮会将其切换为字符串值。 / p>

我想你可以通过评估字符串值来处理这个问题，或者创建一个方法将单选按钮的字符串值转换为布尔值。

Answer 2

我必须进行2次更改

在[]周围添加value以获取布尔值而不是字符串

          <input type="radio"
                 name="responded"
                 [(ngModel)]="oResponded"
                 #responded="ngModel"
                 [value]="true"> Yes someone responded

将disabled属性设置为属性而不是布尔值，并在null的情况下将其设置为false：

    <select class="form-control" id="responseType"
            required
            [(ngModel)]="oResponseType" name="responseType"
            #responseType="ngModel"
            [attr.disabled]="oResponded ? null : true">

Plunker example

为什么在Angular2中使用变量的否定数据绑定？

2 个答案: