Question

如何设置方点的索引并使用ngSwitch将.form-style div与我的问题和输入列表连接起来。我们的想法是通过切换方形点来隐藏和显示每个问题。但是它只在页面上显示一个问题。

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

您可以使用[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>

如何在循环中使用ngSwitch

1 个答案: