Angular 2，來自枚舉的事件

Question

我有一個問題我不知道如何使「Titulo」枚舉的值2隱形，並且當我單擊單選按鈕「existio」的值「no」（1） coincidence.component.html的CONTACTO」可見

這是巧合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>

這是面板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); 
 
    } 
 

 
}

類ValorGestionTelefonica

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

Answer 1

概括你的問題，以確保我有它正確

要跨在ngFor 2個鍵的枚舉迭代。你希望第二個只在第一個事件發生後纔出現。

1）如果枚舉總是2個項目，爲什麼要打擾這些呢？你很可能只是簡單地直接編碼的兩個元素和ngIf周圍配合他們什麼

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

2）如果你的枚舉是一個動態的長度，或者你想以編程方式管理它，那麼我會通過將處理它您的標題放在包含showMe布爾標誌的對象中。例如，

在您的面板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事件和改變的VAR SHOWME要顯示或隱藏的項目（可能需要通過EventEmitter或其他東西將事件重新注入面板）

您可能想要玩弄typin gs參與，但這會讓你設置