angular - 选择在父级的 ngFor 内循环的特定子组件
问题描述
我在 HTML 下面有一个 mat-expansion-panels 列表。用户可以通过单击添加按钮添加任意数量的面板。
父组件 HTML
<mat-accordion>
<ng-container *ngFor="let item of items; let i = index;">
<mat-expansion-panel (opened)="setOpened(i)" (closed)="setClosed(i)" hideToggle="true">
<mat-expansion-panel-header [collapsedHeight]="'66px'" [expandedHeight]="'60px'">
<div class = "nc-rsc-wrapper">
<app-resource-summary-card [resourceData] = "item.resCategory"></app-resource-summary-card>
</div>
</mat-expansion-panel-header>
<div class = "">
<app-resource-edit (resourceDataEmitter)="collectResourceData($event, i)" id = "matExp"></app-resource-edit>
</div>
</mat-expansion-panel>
</ng-container>
</mat-accordion>
<button mat-button (click)="addResource()" class = "mt-3">ADD RESOURCE</button>
用户可以展开 mat-expansion-panels 并编辑app-resource-edit
组件内部给出的表单。但是,我想在用户关闭它时获取特定扩展面板的表单状态。我设法使用 获取表单状态viewChild
,但它仅返回第一个扩展面板表单的状态。
父组件.ts:
@ViewChild(ResourceEditComponent) resEditCmp: ResourceEditComponent;
setClosed(itemIndex) {
if (this.resEditCmp.resourceEditForm.invalid){
this.items[itemIndex].valid = false;
console.log(this.items[itemIndex].valid);
}
else if (this.resEditCmp.resourceEditForm.valid){
this.items[itemIndex].valid = true;
console.log(this.items[itemIndex].valid);
}
}
有谁知道如何选择在父级的 ngFor 内循环的特定子组件?
编辑:
子组件
<form [formGroup]="resourceEditForm">
<div class="row">
<div class="col-4">
<mat-form-field class="col-12 example-full-width" appearance="outline">
<mat-label>Resource Category</mat-label>
<mat-select formControlName="resCategory" (selectionChange)="loadForm($event)">
<mat-option value="airtime">Airtime</mat-option>
<mat-option value="sms">SMS</mat-option>
<mat-option value="voice">Voice</mat-option>
<mat-option value="data">Datapack</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="col-12 example-full-width" appearance="outline">
<mat-label>Quantity</mat-label>
<input matInput placeholder="" formControlName="quantity" value="">
</mat-form-field>
</div>
<div class="col-4">
<mat-form-field class="col-12 example-full-width" appearance="outline">
<mat-label>Validity Period</mat-label>
<input matInput placeholder="" formControlName="validityPeriod" value="">
</mat-form-field>
</div>
<div class="col-4" *ngIf="selectedFormName==='sms' || selectedFormName==='voice' || selectedFormName==='data'">
<mat-form-field class="col-12 example-full-width" appearance="outline">
<mat-label>Type</mat-label>
<input matInput placeholder="" formControlName="type" value="">
</mat-form-field>
</div>
<div class="col-4" *ngIf="selectedFormName==='data'">
<mat-form-field class="col-12 example-full-width" appearance="outline">
<mat-label>Pack Type</mat-label>
<input matInput placeholder="" formControlName="packType" value="">
</mat-form-field>
</div>
</div>
<button mat-button (click)="save()">Next</button>
</form>
ngOnInit(){
this.resourceEditForm = this.formBuilder.group({
resCategory: ['', Validators.required],
quantity: ['', Validators.required],
validityPeriod: ['', Validators.required],
type: ['', Validators.required],
packType: ['', Validators.required]
});
}
解决方案
获取所有 ResourceEditComponent 作为查询列表;
@ViewChildren(ResourceEditComponent) resEditCmp: QueryList<ElementRef>;
然后按索引取列表中的选中项
setClosed(itemIndex) {
let currentresEditCmp = this.resEditCmp[itemIndex];
}
推荐阅读
- flutter - 使用带有 ChangeNotifier 的 Provider 对模型更改进行方法调用
- python - Python PuLP 优化问题 - 最小化平均偏差
- arrays - 为什么我在实现 strcat() 时得到错误的源字符串输出?
- string - 如何解析数字和单词(字符串)的字符串?在 Java 中
- c# - Jwt 和 Cookie 身份验证
- wordpress - 在 Wordpress 上使用 Elementor 的响应式列
- ruby-on-rails - PG::UndefinedFunction: 错误: 函数 array_append(anyarray, anyelement) 不存在
- amazon-web-services - 本地计算机上的 AWS Sagemaker:请求中包含无效的安全令牌
- javascript - 如何有选择地将方法添加到 javascript 中的链中?
- php - Woocommerce - 产品缺货时禁用 add_to_cart 按钮