我有两个Angular组件
results.table和results.query
当用户点击results.query.component中的重置按钮时,我想隐藏results.table.component内的表格。
也许我在使用事件发射器时做错了,或者还有更好的方法来解决这个问题。
results.table HTML
<div *ngIf='results?.length>0'>
<table *ngIf="showResults" class='table'>
<tr>
<th>Result Name</th>
<th>Location</th>
</tr>
<tbody>
<ng-template ngFor let-results [ngForOf]='items' let-i="index">
<tr>
<td>
<span>{{result?.description}}</span>
</td>
<td>
<span>{{result?.location}}</span>
</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
结果表 TS
showResults: boolean = true;
showResults(event) {
console.log('this is not getting called')
if (event) {
this.showResults = false;
}
}
结果查询HTML
<div class="panel-body">
<form (submit)="onSubmitClicked()">
<div class="row">
<div class="form-group col-md-12 col-xs-12">
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label class="col-md-12 col-xs-12 control-label no-margin no-padding">Location: </label>
<pg-radio-toggle-select class="col-md-12 col-xs-12 no-margin no-padding" name="locationChangeInput" [(ngModel)]="Location"
(selectedChanged)="onFilteringLocation($event)" [options]='locationOptions'>
</pg-radio-toggle-select>
</div>
<pg-inputfield name="description" class="col-xs-12 col-sm-3 col-md-3 col-lg-3" [(ngModel)]="paramsModel.description"
displaytext="Name:"></pg-inputfield>
</div>
</div>
<div>
<button type="reset" class="btnReset" (click)="reset()">Reset</button>
<button type="submit" name="btnSearch">Search</button>
</div>
</form>
</div>
查询结果 TS
import {Component, OnInit, EventEmitter, Output} from '@angular/core';
import * as _ from 'lodash';
import { LocationService } from '../location-service.service';
@Component({
selector: 'result-query',
templateUrl: './result-query.component.html',
styleUrls: ['./result-query.component.less'],
})
export class ResultQueryComponent implements OnInit {
@Output() showResults: EventEmitter<boolean> = new EventEmitter<boolean>();
constructor(
private LocationService: LocationService,
) {
this.reset();
}
ngOnInit() {
this.reset();
}
onSubmitClicked() {
console.log('test')
}
reset(): void {
console.log('I am the reset king');
this.showResults = false;
this.showResults.emit(true);
this.onSubmitClicked();
}
}
results.table
组件的完整 HTML 代码?我们想知道results.table
组件的 HTML 代码和results.query
之间的关系,也就是这两个组件是如何渲染的,是父子关系还是其他关系。根据您提供的代码,我们将能够给出答案。 - user2216584