Javascript 在Angular app.component.ts中使用jQuery代码

我正在开发Angular应用程序。我使用以下代码导入了jQuery包

$ npm install jquery --save

我正在尝试将html网页的.js数据传输到angular的app.component.ts。我的JQuery设置是在angular应用程序中完成的，我甚至对它进行了测试。 我的网页中有一个复选框，将选中该复选框以使用单击按钮删除文件。为了实现这一点，我在JS中使用了以下代码

function RemoveFile() {
  var files = document.getElementById("files").children;
  for (var i = 1; i < files.length; i++) {
    if (files[i].children[0].children[0].checked) {
      files[i].remove();
      i--;
    }
  }
}

我如何纠正它或使用类似的东西

selectedFile.children[4].children[0].checked = $(this)[0].checked;

//首先安装jQuery npm安装--保存jquery

//和jQuery定义 npm安装-D@types/jquery

在buildlike下的

angular.json脚本：[

数组中添加jquery路径

脚本：[“node_modules/jquery/dist/jquery.min.js”]

---

然后添加

声明var$：any

after-import语句和jquery-ready-to-use

jquery只应在最特殊的情况下在Angular中使用。Angular是一个javascript框架，用于根据您的模型动态管理DOM。如果在Angular之外管理DOM，很可能会遇到意外的结果

在您的情况下，我将假设您的组件中有一些文件数组

组件。ts

导出类MyComponent{
文件：任意[]=[]；
恩戈尼尼特（）{
//以某种方式得到文件
this.files=[]；
}
}

我将假设在HTML中，您构建了某种列表，其中包含每个文件的嵌套复选框

用户将选中一些复选框，然后按下按钮从列表中删除这些文件（并可能执行一些其他操作）

component.html

删除文件

所以您已经使用Angular来构建列表，但是现在您想使用jQuery来“取消构建”列表吗？你为什么要那样做

Angular的强大之处在于它的简单性——HTML将反映文件数组中的任何内容。因此，如果要“取消构建”列表，只需从数组中删除项即可

无可否认，当你必须考虑像复选框这样的事情时，有点棘手，但这不是求助于使用jQuery的借口。 由于您将有效地使用动态数组构建表单，因此处理此问题的最佳方法是使用带有表单数组的被动表单

在应用程序模块中导入被动表单模块：

应用程序模块.ts

从'@angular/forms'导入{FormsModule，ReactiveFormsModule}；
@NGD模块({
进口：[
FormsModule，
反应窗体模块
]
}

在组件中，您需要从

@angular/forms

中插入

FormBuilder

。然后在拥有模型（可能在服务订阅中）后构建表单

然后，您将删除表单提交处理程序中的文件。您确实需要拼接两个数组，但表单数组是从文件数组构建的，因此它们具有匹配的索引

组件。ts

从'@angular/forms'导入{FormBuilder，FormGroup，FormArray}；
//…其他进口
导出类MyComponent{
构造函数（私有formBuilder:formBuilder）{}
文件：任意[]=[]；
表格：表格组；
私有文件格式：格式；
ngOnInit（）：void{
//以某种方式得到文件
this.files=[]；
//如果希望每个文件都有多个控件，请构建表单组数组。
//如果希望每个文件都有一个控件，请构建表单控件数组
//我将只为每个文件添加一个控件-一个未选中的复选框，
//但是每个文件使用一个表单组来显示它是如何完成的
const filesFormGroups=this.files.map（x=>this.formBuilder.group({
删除：this.formBuilder.control（false）
}));
//构建表单数组。存储对它的引用以便于以后访问
this.filesFormArray=this.formBuilder.array（filesFormGroups）；
//构建整个表单。目前只有文件。
this.form=this.formBuilder.group({
文件：this.filesFormArray
});
}
onSubmit（）：void{
//从数组的末尾开始，然后向后操作
for（设i=this.files.length-1；i>=0；i--）{
//从表单数组中获取复选框
const checkBox=this.filesFormArray.controls[i]。获取（'delete'）作为FormControl；
if（checkbox.value）{
//从模型和表单中删除该项
这个.files.splice（i，1）；
this.filesFormArray.controls.splice（i，1）；
}
}
}
}

在HTML中，您仍然可以从文件生成，但也可以绑定到表单。您可以使用指令

formGroupName

、

formarayname

和

formControlName

来匹配在组件中生成的表单组的结构

component.html

删除文件

我尝试了您给定的步骤，但它们不起作用。我遇到了相同的错误。我如何访问子[]或父[]元素？请不要鼓励像这样在Angular中使用jQuery。Angular应该用于DOM操作，而不是jQuery。@Kurt Hamilton我不会，但我仍在完成我的项目的中途。我需要知道怎么做？@Abhising答案是……不要。请学习如何使用AngularjQuery不应该用于DOM操作。Angular非常擅长从您的模型构建HTML-为什么您要使用jQuery来干扰它？您能在这里发布HTML代码吗？您在复选框类型输入中使用了[（ngModel）]=“check”吗？

selectedFile.children[4].children[0].checked = $(this)[0].checked;