如何在循環中使用ngSwitch

如何設置方形點的索引並使用ngSwitch將.form-style div與我的問題和輸入列表連接起來。這個想法是通過切換方形點來隱藏和顯示每個問題。但是它只在頁面上顯示一個問題。如何在循環中使用ngSwitch

<!--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'; 
    } 
    } 

}

來源

2017-09-15 codeRamen

通過創建一個小例子，你增加你的機會很多得到一個很好的答案HTTPS： //stackoverflow.com/help/mcve –

請閱讀[在什麼情況下，我可以添加「緊急」或其他類似的短語到我的問題，以獲得更快的答案？]（ //meta.stackoverflow.com/q/326569） - 總結是，這不是解決志願者問題的理想方式，並且可能會對獲得答案產生反作用。請不要將這添加到您的問題。 – halfer

您可以使用[ngSwitch]="expression"和*ngSwitchCase="value"：

<!--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>

來源

2017-09-15 10:56:33

如何在循環中使用ngSwitch

回答

相關問題