Angular 2,根据radiobutton的选择放置

时间:2017-06-27 22:30:28

标签: html angular typescript

当我刚刚打开页面时,我怎么能实现这一点?md-select是不可见的,当它在单选按钮上被选中时 - 没有 - 显示第一个选择是什么?如果你选择-si-tercero-只显示选择¿si-tercero ?,我有点新角,我会非常感谢他们可以帮助我

这是我的HTML

<div class="row">
  <div class="small-12 columns">
    <md-card class="cards">
      <div class="row">
        <div class="small-6 columns">
          <div class="row">
            <div class="small-6 columns">
              <span>Numero coincidente 3333333333</span>
            </div>
            <div class="small-6 columns">
              <span>Existió Contacto</span>
              <md-radio-group class="radio-vertical">
                <md-radio-button value="0">Sí</md-radio-button>
                <md-radio-button value="1">No</md-radio-button>
                <md-radio-button value="2">Si-Tercero</md-radio-button>
              </md-radio-group>
            </div>
          </div>
        </div>
        <div class="small-6 columns">
          <md-select placeholder="¿No?" class="select_100" floatPlaceholder="never">
            <md-option value="NC">No contesta</md-option>
            <md-option value="TO">Teléfono ocupado</md-option>
            <md-option value="NT">Numero temporalmente fuera de servicio</md-option>
            <md-option value="NE">Numero equivocado</md-option>
            <md-option value="AS">Apagado o sin señal / buzón de mensajes</md-option>
            <md-option value="D">Dañado / no asignado</md-option>
            <md-option value="CA">Caída de avayas</md-option>
            <md-option value="FC">Falla en comunicación</md-option>
            <md-option value="NC">No conoce al cliente</md-option>
            <md-option value="NCC">No corresponde el celular al cliente</md-option>
            <md-option value="CNS">Cliente no reconocer solicitud (posible fraude o fraude confirmado)</md-option>
            <md-option value="ME">Menor de edad, adulto mayor , discapacitados</md-option>
            <md-option value="PO">PBX otra</md-option>
            <md-option value="PE">PBX empresa formulario</md-option>
          </md-select>
          <md-select placeholder=¿Si-Tercero? class="select_100" floatPlaceholder="never">
            <md-option value="-1">Seleccione una opcion</md-option>
            <md-option value="SR">Tercero no suministra nuevo número de contacto pero sirve como referencia</md-option>
            <md-option value="NI">Tercero no suministra información</md-option>
            <md-option value="NN">Tercero suministra nuevo número de contacto</md-option>
            <md-option value="SI">Tercero suministra información y confirma número de contacto</md-option>
          </md-select>
        </div>
      </div>
    </md-card>
  </div>
</div>
<div class="row">
  <div class="small-12 columns">
    <md-card class="cards">
      <div class="row">
        <div class="small-6 columns">
          <div class="row">
            <div class="small-6 columns">
              <span>Numero coincidente 3333333333</span>
            </div>
            <div class="small-6 columns">
              <span>Existió Contacto</span>
              <md-radio-group class="radio-vertical">
                <md-radio-button value="0">Sí</md-radio-button>
                <md-radio-button value="1">No</md-radio-button>
              </md-radio-group>
            </div>
          </div>
        </div>
        <div class="small-6 columns">
          <md-select class="select_100" floatPlaceholder="never">
            <md-option value="NC">No contesta</md-option>
            <md-option value="TO">Teléfono ocupado</md-option>
            <md-option value="NT">Numero temporalmente fuera de servicio</md-option>
            <md-option value="NE">Numero equivocado</md-option>
            <md-option value="AS">Apagado o sin señal / buzón de mensajes</md-option>
            <md-option value="D">Dañado / no asignado</md-option>
            <md-option value="CA">Caída de avayas</md-option>
            <md-option value="FC">Falla en comunicación</md-option>
            <md-option value="NC">No conoce al cliente</md-option>
            <md-option value="NCC">No corresponde el celular al cliente</md-option>
            <md-option value="CNS">Cliente no reconocer solicitud (posible fraude o fraude confirmado)</md-option>
            <md-option value="ME">Menor de edad, adulto mayor , discapacitados</md-option>
            <md-option value="PO">PBX otra</md-option>
            <md-option value="PE">PBX empresa formulario</md-option>
          </md-select>
        </div>
      </div>
    </md-card>
  </div>
</div>

这是我的组件

import {
  Component,
  OnInit
} from '@angular/core';
import {
  MdRadioChange,
  MdSelectChange
} from "@angular/material";


@Component({
  selector: 'app-coincidencia',
  templateUrl: './coincidencia.component.html',
  styleUrls: ['./coincidencia.component.css']
})
export class CoincidenciaComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

1 个答案:

答案 0 :(得分:1)

你走在正确的轨道上。您只需要设置HttpContext.Current即可从单选按钮获取值,并将ngModel条件添加到*ngIf。根据{{​​1}}条件,md-select将隐藏/显示。

突出显示代码的主要部分:

ngIf

Plnkr demo