Question

我有两个单选按钮HTML look like

的组件

<div class="btn-group"  id="ProfitCodes">
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           id="point1"
           name="ProfitCode"><small>description</small>
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio"
           class="radio-inline"
           [(ngModel)]="model.ForeignCompany.ProfitCode"
           [checked]="model.ForeignCompany.ProfitCode === 2"
           value="2"
           id="point2"
           name="ProfitCode"><small>description</small>
    </label>
</div>

当我点击保存并将模型发送到服务器时，我看到服务器端的单选按钮的有效选择值。并且此值存储在数据库中而没有错误。但是在绑定数据后，具有适当值的radiobutton不会被削减。在devTools中，我看到了第一个单选按钮：

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point1" name="ProfitCode" title="asdasda" type="radio" value="1" ng-reflect-name="ProfitCode" ng-reflect-value="1" ng-reflect-model="2" ng-reflect-checked="false">

第二个单选按钮：

<input class="radio-inline ng-untouched ng-pristine ng-valid" id="point2" name="ProfitCode" title="asd" type="radio" value="2" ng-reflect-name="ProfitCode" ng-reflect-value="2" ng-reflect-model="2" ng-reflect-checked="true">

我看到角度改变了属性并等待第二个单选按钮被检查。但这不会发生。我做错了什么？

Answer 1

这适用于我的情况。我删除[（ngModel）]

<div class="radio">
<label>
    <input type="radio"
           value="1"
           [checked]="model.ForeignCompany.ProfitCode === 1"
           id="point1"
           (change)="onProfitSelectionChange(1)"
           name="ProfitCode"><small>description</small>
</label>
</div>
<div class="radio">
    <label>
        <input type="radio"
               value="2"
               [checked]="model.ForeignCompany.ProfitCode === 2"
               id="point2"
               (change)="onProfitSelectionChange(2)"
               name="ProfitCode"><small>description</small>
    </label>
</div>

和TS方法看起来像：

onProfitSelectionChange(entry): void {
    this.model.ForeignCompany.ProfitCode = entry;
}

Answer 2

您不需要[checked]尝试使用[（ngModel）]也使用[value] =“1”而不是value =“1”

class Test[A <% Comparable[A]](val q: MinMaxPriorityQueue[A])
val a = new Test[Double](MinMaxPriorityQueue.create())

Answer 3

<label *ngFor="let status of statuses">
    <input type="radio" name="name" [(ngModel)]="entity.status" [value]="status.id">
    <b>{{ status.name | i18n }}</b>
</label>

Answer 4

尝试一下。

Future loginWithTwitter() async {
var twitterLogin = new TwitterLogin(
  consumerKey: 'your consumerKey',
  consumerSecret: 'your consumerSecret',
);

final TwitterLoginResult result = await twitterLogin.authorize();
switch (result.status) {
  case TwitterLoginStatus.loggedIn:
    var session = result.session;
    final AuthCredential credential = TwitterAuthProvider.getCredential(
        authToken: session.token, authTokenSecret: session.secret);
    AuthResult firebaseUser = await _auth.signInWithCredential(credential);
    print("twitter user name" + firebaseUser.user.displayName);
    print("twitter user email" + firebaseUser.user.email);
    print("twitter user image" + firebaseUser.user.photoUrl);
    break;
  case TwitterLoginStatus.cancelledByUser:
    break;
  case TwitterLoginStatus.error:
    break;
 }
}

如何正确地将数据绑定到Angular2中的单选按钮？

4 个答案: