如何在 angular 6 中單擊從一個組件到另一個組件的按鈕時檢查復選框的值

Question

我有 2 個組件，一個側邊欄和主組件。我在側邊欄組件中有一些復選框和一個按鈕，當我單擊該按鈕時，我需要在主組件上顯示選中的復選框值。 我已經收到警報但是如何獲取值，我無法獲取它。這是下面的代碼

側邊欄組件。html

<div class="header" *ngIf="router.url !== '/' && router.url !== '/login'">    
            <div class="citilist p-1">List of Cities</div>
            <ul class="p-2">
                <li  class="mb-3 p-1 border-bottom" *ngFor="let city of list;let i = index"><span class="mr-2"><input type="checkbox"></span><span>{{city.city}}</span></li>
            </ul>
            <div class="float-right mr-1 submitbtn"><button (click)="downloadClicked.emit(null)" class="btn btn-primary" type="button">Submit</button></div>
</div>

側邊欄組件.ts

import { Component, OnInit,Output,EventEmitter} from '@angular/core';
import { Router }  from "@angular/router";
import { CommonserviceService } from './../../utilities/services/commonservice.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  @Output() 
  downloadClicked: EventEmitter<any> = new EventEmitter();

  list: any[] = [{"city":"MOSCOW"},{"city":"TOKYO"},{"city":"LONDON"},{"city":"BRASILIA"},{"city":"NEW DELHI"},{"city":"KATHMANDU"},{"city":"PARIS"}];

  constructor(public router: Router,private commonserviceService: CommonserviceService){} 

  ngOnInit() {
  }

}

homecomponent.html

<div class="row m-0">
    <div class="col-sm-3 p-0 border border-bottom-0 maindiv">
        <app-sidebar (downloadClicked)="generarPDF()"></app-sidebar>
    </div>
    <div class="col-sm-9 p-0"><div class="citilist p-1">Output</div></div>
</div>

主頁組件.ts

import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getListData: any;
  constructor(private commonserviceService: CommonserviceService) { }
  @ViewChild('content', { 'static': true}) content:ElementRef;
  name:string;

  ngOnInit() {
     
  }

  generarPDF() {
  this.name="hello";
  alert(this.name);
}
}

Answer 1

我們需要設置一個 class 級別變量以通過文本框跟蹤所選值。 我們可以通過這些更新來做到這一點。

側邊欄組件。html

<div class="header">
  <div class="citilist p-1">List of Cities</div>
  <ul class="p-2">
    <li class="mb-3 p-1 border-bottom" *ngFor="let city of list;let i = index">
      <span class="mr-2">
        <!-- This allows us to set the class level variable of city to the correct city.  -->
        <input type="checkbox" (change)="citySelected(city.city)" />
      </span>
      <span>{{city.city}}</span>
    </li>
  </ul>
  <div class="float-right mr-1 submitbtn">
    <button
      <!-- Here, we're going to emit that class level variable of city.  -->
      (click)="downloadClicked.emit(city)"
      class="btn btn-primary"
      type="button"
    >
      Submit
    </button>
  </div>
</div>

側邊欄組件.ts

import { Component, OnInit,Output,EventEmitter} from '@angular/core';
import { Router }  from "@angular/router";
import { CommonserviceService } from './../../utilities/services/commonservice.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  @Output() downloadClicked: EventEmitter<any> = new EventEmitter();

  list: any[] = [
    { city: "MOSCOW" },
    { city: "TOKYO" },
    { city: "LONDON" },
    { city: "BRASILIA" },
    { city: "NEW DELHI" },
    { city: "KATHMANDU" },
    { city: "PARIS" }
  ];

  city = "";

  constructor(
    public router: Router,
    private commonserviceService: CommonserviceService
  ) {}

  ngOnInit() {}

  citySelected(city) {
    this.city = city;
  }
}

homecomponent.html

<div class="row m-0">
  <div class="col-sm-3 p-0 border border-bottom-0 maindiv">
    <!-- Notice that we're passing in a $event value here. -->
    <app-test (downloadClicked)="generarPDF($event)"></app-test>
  </div>
  <div class="col-sm-9 p-0">
    <div class="citilist p-1">
      Output
    </div>
  </div>
</div>

主頁組件.ts

import { Component, OnInit,ViewChild, ElementRef } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
@ViewChild("content", { static: true }) content: ElementRef;
  getListData: any;
  name: string;

  constructor(private commonserviceService: CommonserviceService) {}

  ngOnInit() {}

  generarPDF(event) {
    alert(event);
  }
}

Answer 2

我會在你的側邊欄組件中收集你所有的帶有 ViewChildren 的復選框。 然后只過濾選中的並將值發送到您的父組件。 （我只是添加了必要的和更改的行）

側邊欄組件。html

<li *ngFor="let city of list;let i = index">
  <input #cbs type="checkbox" value="{{city.city}}">
  {{city.city}}
</li> 
<button (click)="send()">Submit</button>

側邊欄組件.ts

   @ViewChildren('cbs') cbs;

   send() {
      // filter only checked element  
       const cbsChecked = this.cbs._results.filter(cb => {
         return cb.nativeElement.checked;
       });

       // send city name in defined list
       this.downloadClicked.emit(cbsChecked.map(cb => {
        return {city: cb.nativeElement.value};
       }));
     }

主頁組件.ts

generatePdf(cities) {
    console.log(cities); 
}

stackblitz 鏈接： https://stackblitz.com/edit/angular-ivy-vniwxd

Answer 3

StackBlitz 鏈接中的工作演示

側邊欄.html

<button class="p-half" (click)="checkInputIsChecked()"> Send </button>
<ul class="p-2">
    <li class="mb-3 p-1 border-bottom" (click)="methodCall(cityName.checked, i)" 
       *ngFor="let city of list;let i = index">
       <span class="mr-2">
          <input #cityName [id] = "i" [checked]="city?.isChecked" 
                 [value]="city" type="checkbox">
       </span>
       <label [for]="i" >{{city.city}}</label>
    </li>
</ul>

側邊欄.ts

list: any[] = [
               { "city":"MOSCOW" }, 
               { "city":"TOKYO" },
               { "city":"LONDON" },
               { "city":"BRASILIA" },
               { "city":"NEW DELHI" },
               { "city":"KATHMANDU" },
               { "city":"PARIS"}
              ];
checkedList;
@Output() downloadClicked: EventEmitter<any> = new EventEmitter<any>();
constructor() { }
ngOnInit() { 
}
methodCall(inn, inputIndex){
   this.list[inputIndex] = {...this.list[inputIndex], 'isChecked': !inn};
}
checkInputIsChecked(){
   this.checkedList = this.list.filter(item => item.isChecked === true);
   this.downloadClicked.emit(this.checkedList);
}

首頁.html

<div class="container">
     <div class="sidebar p-1">
          <app-sidebar (downloadClicked) ="checkedInput($event)"></app-sidebar>
     </div>
     <div class="main p-1">
         <p>This is Home Main Content</p>
         <pre>
              {{inputChecked |json}}
         </pre>
     </div>
</div>

主頁.ts

inputChecked;
constructor() { }
ngOnInit() {
}
checkedInput(allCheckedInput){
   this.inputChecked = allCheckedInput;
}