单击按钮时从同一组件中清除数据

Posted 2023-03-13

【中文标题】单击按钮时从同一组件中清除数据

【英文标题】：Clear data from the same component when clicking the button

【发布时间】：2020-05-08 00:08:21

【问题描述】：

在一个组件中，我两次使用同一个库（非必要）。当您提交表单时，只清理了一个组件，而实际上这两个组件都应该被清理。

我不知道为什么只清理一个组件。

谁能找出问题所在，或者我如何删除这两个组件中的数据？

DEMO

代码

 @ViewChild(DxhtmlEditorComponent, static: false) dxHtmlEditor;


 clearAll()  
   this.dxHtmlEditor.instance.reset();
   alert("clear works!")
 

html

<dx-html-editor>
    <dxi-mention
        valueExpr="text" 
        displayExpr="text"
        [dataSource]="employees"
    ></dxi-mention>
</dx-html-editor>



<dx-html-editor>
    <dxi-mention
        valueExpr="id" 
        displayExpr="text"
        [dataSource]="users"
    ></dxi-mention>
</dx-html-editor>

【参考方案1】：

您目前仅获得一个带有ViewChild 的实例。将其更改为 ViewChildren 并循环遍历它们：

import  Component, ViewChildren, QueryList  from "@angular/core";
import  DxHtmlEditorComponent  from "devextreme-angular";

@Component(
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
)
export class AppComponent 
  @ViewChildren(DxHtmlEditorComponent) editors: QueryList<DxHtmlEditorComponent>;

  clearAll() 
    this.editors.forEach(editor => editor.instance.reset())
  

Blitz

【参考方案2】：

您需要使用ViewChildren，因为ViewChild 仅引用单个实例（第一次出现）。

请注意，list 将是 QueryList of DxHtmlEditorComponent

更多答案可以在这里找到：

Access multiple viewchildren using @viewchild