Angular 2, Ereignis von enum

Question

Ich habe ein Problem, ich weiß nicht, wie man den Wert 2 der "Titulo" -Enumerisierung unsichtbar macht und dass, wenn ich auf den Wert "nein" (1) des Radio-Knopfes "existio contacto“von coincidence.component.html sichtbar

Dies ist Koinzidenz 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>

Dies ist Koinzidenz 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); 
 
    } 
 
    } 
 
}

Dies ist Panel tres

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

Diese HTML ist Panel tres ts

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); 
 
    } 
 

 
}

Klasse ValorGestionTelefonica

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

Answer 1

Ihr Problem fassen, um sicherzustellen, dass ich es richtig haben

Sie sind in einem ngFor über eine Enumeration von 2 Schlüssel iterieren. Sie möchten, dass die Sekunde erst erscheint, wenn ein Ereignis auf der ersten auftritt.

1) Wenn die Enum immer 2 Stück lang ist, warum sollte man sich damit befassen? Sie könnten sehr einfach nur direkt die beiden Elemente kodieren und sie um in ngIf oder etwas

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

2) binden Wenn Ihr Enum einer dynamischen Länge ist oder Sie wollen es programmatisch verwalten, dann würde ich damit umgehen, indem sie Überschriften in einem Objekt, das ein boolesches showMe-Flag enthält. Zum Beispiel

In Ihrem 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 
    }); 

}); 

dann coincidence.html Vorlage aktualisieren, die Änderung

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

Dann fangen das Click-Ereignis zu reflektieren und die showme ändern var von das Element, das Sie ein- oder ausblenden möchten (Eventuell muss das Ereignis über einen EventEmitter oder ein Ereigniselement in panel-tres eingeblendet werden.)

Sie möchten vielleicht mit dem Typ herumspielen gs beteiligt, aber das wird Sie Setup