Question

我有一个问题我不知道如何使“Titulo”枚举的值2变得不可见，并且当我点击coincidence.component的单选按钮“existio contacto”的值“no”（1）时.html可见

这是巧合html

  <div class="row">
      <div class="small-12 columns">
        <md-card class="cards">
          <span class="title">{{titulo}} </span>
          <div class="row">
            <div class="small-6 columns">
              <div class="row">
                <div class="small-6 columns">
                  <span class="subtitle">
    Number matching</span>
                  <span>3333333333</span>
                </div>
                <div class="small-6 columns">
                  <span class="subtitle">
    existio contacto</span>
                  <md-radio-group class="radio-vertical" [(ngModel)]="valorRadio" (change)="opcionNoExistioContacto($event)">
                    <md-radio-button value="0">Yes</md-radio-button>
                    <md-radio-button value="1">No</md-radio-button>
                    <md-radio-button value="2">Yes third</md-radio-button>
                  </md-radio-group>
                </div>
              </div>
              <div class="small-12 columns">
                <md-select *ngIf="valorRadio == 1" placeholder="Causal" class="select_100">
                  <md-option value="0">Does not answer</md-option>
                  <md-option value="1">
                    Occupied phone</md-option>
                </md-select>
                <md-select *ngIf="valorRadio == 2" placeholder="No Contacto" [(ngModel)]="valorOpcion" class="select_100">
                  <md-option value="0">
                    Third does not provide new contact number but serves as reference</md-option>
                  <md-option value="1">
                    Third does not provide information</md-option>
                </md-select>
              </div>
            </div>
            <div *ngIf="valorOpcion == 3 || valorOpcion == 2">
              <div class="small-6 columns">
                <div class="row">
                  <div class="small-6 columns">
                    <span>phone</span>
                    <input type="tel" maxlength="10">
                  </div>

                </div>

              </div>
            </div>
          </div>
        </md-card>
      </div>
    </div>

这是巧合ts

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter
} from '@angular/core';
import {
  MdRadioChange
} from "@angular/material";

import {
  ValorGestionTelefonica
} from "app/dto/datos";

@Component({
  selector: 'app-coincidence',
  templateUrl: './coincidence.component.html',
  styleUrls: ['./coincidence.component.css']
})
export class CoincidenceComponent implements OnInit {
  @Input() titulo: number;
  @Input() indice: number;
  @Output() evaluarOpciones = new EventEmitter < ValorGestionTelefonica > ();


  constructor() {}

  ngOnInit() {}

  opcionNoExistioContacto(evento: MdRadioChange) {
    if (evento.source) {
      let valor = new ValorGestionTelefonica();
      valor.indice = this.indice;
      valor.valor = evento["value"];

      this.evaluarOpciones.emit(valor);
    }
  }
}

这是面板tres html

<app-coincidence *ngFor="let a of titulos; let i = index" [indice]=i [titulo]=a (evaluarOpciones)="evaluarOpciones($event)"></app-coincidence>

这是小组讨论

import {
  Component,
  OnInit,
  Input,
  Provider
} from '@angular/core';
import {
  ValorGestionTelefonica
} from '../../dto/datos';

enum Titulo {
  'Celular Coincidente con Reconocer' = 1, 'Primer Celular Reconocer' = 2
}
@Component({
  selector: 'app-panel-tres',
  templateUrl: './panel-tres.component.html',
  styleUrls: ['./panel-tres.component.css']
})
export class PanelTresComponent implements OnInit {

  titulos: string[];


  constructor() {}

  ngOnInit() {
    let titulos = Object.keys(Titulo);
    this.titulos = titulos.slice(titulos.length / 2);
    console.log(titulos);
    console.log("titulos");


  }

  evaluarOpciones(valor: ValorGestionTelefonica): void {
    console.log(valor.valor + "--" + valor.indice);
  }

}

类ValorGestionTelefonica

export class ValorGestionTelefonica {
  valor: any;
  indice: number;
}

Answer 1

总结您的问题以确保我的方法正确

您正在遍历ngFor中的2个键的枚举。您希望第二个仅在第一个事件发生后才出现。

1）如果enum总是2个项目，为什么还要烦恼呢？您可以非常简单地直接编码这两个元素并将它们绑定在ngIf或其他东西

中

<coincidence [indice]=1 [titulo]='first title' (click)="showSecond = true"></coincidence>
<coincidence [indice]=2 [titulo]='second title' *ngIf="showSecond></coincidence>

2）如果您的枚举是动态长度或者您想以编程方式管理它，那么我会通过将您的标题放在包含showMe布尔标志的对象中来处理它。例如，

在你的panel-tres.ts

中

let titulosKeys = Object.keys(Titulo);
let titulosList = titulos.slice(titulos.length / 2);
this.titulos = [];
titulosList.forEach(titulo => {

  let showMe;
  if(titulo == 'Celular Coincidente con Reconocer') showMe = true;
  else showMe = false;

  this.titulos.push({
     titulo: titulo,
     showMe: showMe
  });

});

然后更新您的coincidence.html模板以反映该更改

<div class="row" *ngIf="titulo.showMe">
  <div class="small-12 columns">
  <md-card class="cards">
    <span>{{titulo.titulo}}</span>
    <div class="row">
  ...

然后捕获click事件并更改要显示或隐藏的项目的showMe var（可能需要通过EventEmitter或其他东西将事件冒泡回panel-tres）

您可能想要使用所涉及的类型，但这会让您进行设置

Angular 2，来自枚举的事件

1 个答案: