我正在构建子组件byngFir循环，并且当选择了内部的ngselect并且从父组件按下确认按钮然后它应该调用子组件方法但它显示调用未发现错误
这是父组件中的行所在 @ViewChild（DropdownsComponent） child：DropdownnsComponent 我也试过了
@ViewChild('child')
child : DropdownsComponent
和html
<app-dropdowns #child class="col" [listdata]="item"></app-dropdowns>
但它显示调用未定义的错误 并尝试过这些 Angular 2 viewchild not working - cannot read property nativeElement of undefined i also tried this also tried this
这是父组件
import { DropdownsComponent } from '../dropdowns/dropdowns.component';
import {Component, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {Router, ActivatedRoute, ParamMap} from '@angular/router';
declare var swal : any;
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import {BsModalService} from 'ngx-bootstrap/modal';
import {BsModalRef} from 'ngx-bootstrap/modal/bs-modal-ref.service';
import {ProductsService} from './products.service';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.scss'],
})
export class ProductsComponent implements OnInit {
public items : Array < String >= []
public slotitems : Array < String >= []
today = Date.now();
public products$
modalRef : BsModalRef;
modalRef2 : BsModalRef;
modalref3 : BsModalRef;
popupproduct
modalimage
modaldata
productData
dynamicNgselect
list
swtich1 = true
templated
@ViewChild(DropdownsComponent)
child : DropdownsComponent
constructor(private modalService : BsModalService, private route :
ActivatedRoute, private router : Router, private service : ProductsService)
{}
ngOnInit() {
this.slotitems = ['8:00 am to 10:00 am', '10:00 am to 12:00 pm', '2:00 am
to 4:00 pm', '4:00 am to 6:00 pm']
this
.service
.getposition()
.subscribe(data => this.products$ = data, err => {
// Log errors if any
console.log(err);
this
.router
.navigate(['/OnlineOrder'])
}, () => {
if (!this.products$) {
this
.router
.navigate(['/onlineOrder'])
}
console.log("Nothing here", this.products$)
});
this
.service
.getposition()
.subscribe(data => this.popupproduct = data, err => {
// Log errors if any
console.log(err);
}, () => {
console.log("helloasdasd", this.popupproduct)
});
}
addcart(datacoming : any, template : TemplateRef < any >, template2 :
TemplateRef < any >, template3 : TemplateRef < any >) {
this.productData = null;
this.list = null;
this.templated = template3
let someDate = new Date(this.today);
var numberOfDaysToAdd = 1;
for (let i = 0; i < 4; i++) {
var dd = someDate.getDate() + i;
var mm = someDate.getMonth();
var y = someDate.getFullYear();
var someFormattedDate = dd + '-' + mm + '-' + y + ' ₹' + datacoming.opr + '/kg';
this
.items
.push(someFormattedDate);
}
this
.service
.setidofproduct(datacoming.i._id);
console.log("jol", datacoming);
this
.service
.getproduct()
.subscribe((data) => this.productData = data, err => console.log(err), () => {
this
.modalRef
.hide();
this.modalRef2 = this
.modalService
.show(template);
console.log("helloasdasd", this.productData);
})
this.modalRef = this
.modalService
.show(template2);
console.log("here is data", datacoming);
this.modaldata = datacoming;
}
private value : any = {};
public selected(value : any) : void {
this.list = this.productData.meatItem.ma
this.swtich1 = true
console.log('Selected value is: ', this.swtich1);
}
public refreshValue(value : any) : void {
this.value = value;
this.swtich1 = true
}
showAlert2() {
swal('Added to Cart', '', 'success')
}
productSaveInCart() {
this
.modalRef2
.hide();
this.modalref3 = this
.modalService
.show(this.templated);
}
selectedslot(value) {
this
.modalref3
.hide();
this.showAlert2();
this
.child
.sendvalues();
this
.child
.sendvalues();
}
}
这里是父组件HTML
<div fxLayout="column wrap" fxLayout.gt-md="row wrap" fxLayoutAlign="center">
<mat-card *ngFor="let product of products$ ">
<img mat-card-image [src]="product.i.t || '../../assets/images/noimage.png'" [alt]="product.i.i">
<mat-card-footer class="row">
<button type="button" class="col-sm-7 matbuton2 align-self-start" mat-button>
{{product.i.i}}
</button>
<button type="button" class="col-sm-2 offset-md-4 matbuton align-self-end " mat-button>
₹{{product.opr}}/kg
</button>
<fa class="col-sm-2" [name]="'cart-plus'" (click)="addcart(product,template,template2,template3)" [size]=2></fa>
</mat-card-footer>
</mat-card>
</div>
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left"></h4>
<button type="button" class="close btn pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<mat-card style="margin: 0; ">
<img height="400px" style="width: 110%" mat-card-image [src]="modaldata.i.t || '../../assets/images/noimage.png'">
<mat-card-footer class="row">
<h4>Extra prep. time: 1hr</h4>
<ng-select [allowClear]="true" [items]="items" [disabled]="disabled" (data)="refreshValue($event)" (selected)="selected($event)"
(removed)="removed($event)" (typed)="typed($event)" placeholder="No Date selcted">
</ng-select>
<div *ngFor="let item of list ">
<h4 class="col">{{item.n}}</h4>
<app-dropdowns #child class="col" [listdata]="item"></app-dropdowns>
</div>
<button (click)="productSaveInCart()" type="button" class="col matbuton " mat-button>
ADD to Cart
</button>
</mat-card-footer>
</mat-card>
</div>
</ng-template>
<ng-template #template2>
<div class="modal-dialog modal-sm">
<div class="modal-header" style="width: 30px">
<h2 class="modal-title pull-left"></h2>
<fa class="col " [name]="'spinner'" [spin]="true" (click)="addcart(product,template,template2)" [size]=3></fa>
</div>
</div>
</ng-template>
<ng-template #template3>
<div class="modal-header">
<h4 class="modal-title pull-left"></h4>
<button type="button" class="close btn pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<mat-card style="margin: 0; ">
<ng-select [allowClear]="true" [items]="slotitems" [disabled]="disabled" (data)="refreshValue($event)" (selected)="selectedslot($event)"
(removed)="removed($event)" (typed)="typed($event)" placeholder="No Date selcted">
</ng-select>
</mat-card>
</div>
</ng-template>
And here is the Child component
import {Component, Input, OnInit} from '@angular/core';
import {MatProgressBarModule} from '@angular/material';
@Component({selector: 'app-dropdowns', templateUrl:
'./dropdowns.component.html', styleUrls: ['./dropdowns.component.scss']})
export class DropdownsComponent implements OnInit {
@Input()listdata : any;
list : any
constructor() {}
private value : any = {};
public items : Array < string > = [];
ngOnInit() {
this.list = this.listdata.op
this
.list
.map(data => {
if (data.pd == 0) {
this
.items
.push(data.n);
return data.n
} else {
this
.items
.push(data.n + ' ₹' + data.pd);
return data.n + ' ₹' + data.pd;
}
});
console.log("Listdata", this.list);
this.value.text = 'asdgjasgd'
}
private _disabledV : string = '0';
private disabled : boolean = false;
private get disabledV() : string {return this._disabledV;}
private set disabledV(value : string) {
this._disabledV = value;
this.disabled = this._disabledV === '1';
}
public selected(value : any) : void {
console.log('Selected value is: ', value);
}
public removed(value : any) : void {
console.log('Removed value is: ', value);
}
public typed(value : any) : void {
console.log('New search input: ', value);
}
public refreshValue(value : any) : void {
this.value = value;
}
public sendvalues() {
console.log("HEllllllllllllllloooooooooooooooooooooooo");
}
}