Question

我是Angular 5的新用户，我的应用程序中有像组件一样的单选按钮，如下所示。

 <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="vehicles">
      <label ngbButtonLabel class="btn btn-secondary active">
             <input ngbButton type="radio" name="mode" [value]="true" > Toyota
      </label>

      <label ngbButtonLabel class="btn btn-secondary">
              <input ngbButton type="radio" name="mode" [value]="false"> Nissan
      </label>
 </div>

我还有一个单独的div如下。我想显示div只有用户选择日产按钮。我尝试使用ngif。但失败了。有人可以帮助我。

           <div class="col-sm-4">
                            <div class="form-group">
                                <label class="control-label">Vehicle Type</label>
                                <ng-select

                                        [items]="vehicleTypes"
                                        bindLabel="name"
                                        bindValue="id"
                                        [(ngModel)]="selectedVehicleTypesId"
                                        >
                                </ng-select>
                            </div>
              </div>

Answer 1

这是你可以尝试的。

   <label class="btn btn-secondary active">
        <input  type="radio"  [(ngModel)]="show" name="bn" [value]="true"> Show
    </label>

    <label class="btn btn-secondary active">
        <input  type="radio" [(ngModel)]="show" name="bn" [value]='false'> ShowSecond </label>

    <div *ngIf="show">
        This will be togled for 1st Radio
    </div>
    <div *ngIf="!show">
        This will be togled for 2nd Radio
    </div>

将您组件中的属性show声明为boolean，并将其初始化为false。

 show: boolean = false;

这是同一个Demo。您现在可以根据自己的代码和结构进行更改。

希望这有帮助

show div only user选择特定的单选按钮 - Angular 5

1 个答案: