Verwendung von ngSwitch in Schleifen

Question

Wie setze ich den Index der quadratischen Punkte und verwende ngSwitch, um .form-style div mit meiner Liste von Fragen und Eingaben zu verbinden. Die Idee ist es, jede der Fragen zu verstecken und zu zeigen, indem man mit den quadratischen Punkten umschaltet. Es zeigt jedoch nur eine Frage auf der Seite.

<!--contact.component.html--> 
<app-contact-modal [modalTitle] = "'Some Title'" 
        [blocking] = 'false' 
        [modalId] = 'modalId' > 
    <div class="form_container"> 
    <div class="square_dot-row"> 
     <div class="square_dot" [active]="isSelected(1)" (click)="setSquare(1)" 
     *ngFor="let square_dot of square_dots"></div> 
    </div> 
    <div class="form_box"> 
     <form class="form-style"> 
     <h1>How can we help? Tell us about your challenges.</h1> 
     <textarea class="lightbox_form" col="1000"></textarea> 
     </form> 
     <form class="form-style"> 
     <h1>What services are you interested in</h1> 
     <ul class="form-items_row"> 
     <li class="form-items">Social Media</li> 
     <li class="form-items">Video/Studio</li> 
     <li class="form-items">Web/Digital</li> 
     <li class="form-items">Creative Design</li> 
     <li class="form-items">Design</li> 
     <li class="form-items">Media</li> 
     </ul> 
     </form> 
     <form class="form-style"> 
     <h1>What is your goal? What are you trying to accomplish?</h1> 
     <textarea class="lightbox_form" col="1000"></textarea> 
     </form> 
     <form class="form-style"> 
     <h1>Company</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
     <form class="form-style"> 
     <h1>Name</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
     <form class="form-style"> 
     <h1>Title</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
     <form class="form-style"> 
     <h1>Email</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
    </div> 
    </div> 
</app-contact-modal> 

contact.component.ts

import { Component, HostBinding, OnInit } from '@angular/core'; 
import { routeFadeStateTrigger } from '../shared/route-animations'; 
import { contactSlideTrigger } from './contact-animations'; 
import { Router } from '@angular/router'; 
import { CMSService } from '../../services/cms.service'; 
import { CMSProvider } from '../../providers/cms'; 
import { ModalService } from '../../services/modal.service'; 

@Component({ 
    selector: 'app-contact', 
    templateUrl: './contact.component.html', 
    styleUrls: ['./contact.component.css'], 
    providers: [ModalService], 
    animations: [ 
    routeFadeStateTrigger, 
    contactSlideTrigger 
    ] 
}) 
export class ContactComponent implements OnInit { 
    square_dots = ['', '', '', '', '', '', '']; 
    square_btn = 0; 
    showModal = false; 
    @HostBinding('@routeFadeState') routeAnimation = true; 
    footerObject = ''; 

    setSquare(num: number) { 
    this.square_btn = num; 
    } 

    isSelected(num: number) { 
    return this.square_btn === num; 
    } 

    constructor(private router:Router,private cmsService: CMSService, public modalService: ModalService) {} 

    ngOnInit() { 
    this.cmsService.getCMS(9225, (data) => { 
     console.log(data); 
     this.initMap(data); 
    }); 
    } 

    initMap(data: any) { 
    this.footerObject = data.footer[0]; 
    console.log(this.footerObject); 
    } 

    getRoute() { 
    if(this.router.url === '/contact') { 
     return 'sticky-footer'; 
    } 
    } 

    delElem() { 
    if(this.router.url !== '/contact') { 
     return 'remove-el'; 
    } 
    } 

} 

Answer 1

können Sie [ngSwitch]="expression" und *ngSwitchCase="value" verwenden:

<!--contact.component.html--> 
<app-contact-modal [modalTitle] = "'Some Title'" 
        [blocking] = 'false' 
        [modalId] = 'modalId' > 
    <div class="form_container"> 
    <div class="square_dot-row"> 
     <div class="square_dot" [active]="isSelected(1)" (click)="setSquare(1)" 
     *ngFor="let square_dot of square_dots"></div> 
    </div> 
    <div class="form_box" [ngSwitch]="square_dot"> 
     <form class="form-style" *ngSwitchCase="1"> 
     <h1>How can we help? Tell us about your challenges.</h1> 
     <textarea class="lightbox_form" col="1000"></textarea> 
     </form> 
     <form class="form-style" *ngSwitchCase="2"> 
     <h1>What services are you interested in</h1> 
     <ul class="form-items_row"> 
     <li class="form-items">Social Media</li> 
     <li class="form-items">Video/Studio</li> 
     <li class="form-items">Web/Digital</li> 
     <li class="form-items">Creative Design</li> 
     <li class="form-items">Design</li> 
     <li class="form-items">Media</li> 
     </ul> 
     </form> 
     <form class="form-style" *ngSwitchCase="3"> 
     <h1>What is your goal? What are you trying to accomplish?</h1> 
     <textarea class="lightbox_form" col="1000"></textarea> 
     </form> 
     <form class="form-style" *ngSwitchCase="4"> 
     <h1>Company</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
     <form class="form-style" *ngSwitchCase="5"> 
     <h1>Name</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
     <form class="form-style" *ngSwitchCase="6"> 
     <h1>Title</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
     <form class="form-style" *ngSwitchCase="7"> 
     <h1>Email</h1> 
     <input type="text" size="77" id="form-input"> 
     </form> 
    </div> 
    </div> 
</app-contact-modal>