在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--;
}
}
}

它在普通的html页面中运行良好，但当我在app.component.ts中使用它时

Property 'checked' does not exist on type 'Element'

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

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

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

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

组件.ts

export class MyComponent {
files: any[] = [];
ngOnInit() {
// somehow get the files
this.files = [];
}
}

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

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

component.html

<div id="files">
<div *ngFor="let file of files">
<input type="checkbox" />
</div>
</div>
<button (click)="RemoveFile()">Remove files</button>

所以您已经使用Angular来构建列表，但现在您想使用jQuery来"分解"列表？你为什么要那样做？

Angular的强大之处在于它的简单性——HTML将反映文件数组中的任何内容。因此，如果你想"分解"你的列表，那么只需从数组中删除项目。

诚然，当您必须考虑诸如一系列复选框之类的事情时，这会有点棘手，但这并不是使用jQuery的借口。

由于您将有效地使用动态数组构建表单，因此处理此问题的最佳方法是使用具有表单数组的反应式表单。

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

应用程序模块.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule,
ReactiveFormsModule 
]
}

在组件中，您需要从@angular/forms注入FormBuilder。一旦您有了模型(可能在服务订阅中(，就可以构建一个表单。

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

组件.ts

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
// ... other imports
export class MyComponent {
constructor(private formBuilder: FormBuilder) {}
files: any[] = [];
form: FormGroup;
private filesFormArray: FormArray;
ngOnInit(): void {
// somehow get the files
this.files = [];
// Build an array of form groups if you want each file to have multiple controls.
// Build an array of form controls if you want each file to have a single control
// I will just add one control per file - an unchecked checkbox,
// but use a form group per file to show how it is done
const filesFormGroups = this.files.map(x => this.formBuilder.group({
delete: this.formBuilder.control(false)
}));
// Build the form array. Store a reference to it for easy access later
this.filesFormArray = this.formBuilder.array(filesFormGroups);
// Build the whole form. At the moment there will only be files.
this.form = this.formBuilder.group({
files: this.filesFormArray
});
}
onSubmit(): void {
// start at the end of the array and work backwards
for (let i = this.files.length - 1; i >= 0; i--) {
// get the checkbox from the form array
const checkBox = this.filesFormArray.controls[i].get('delete') as FormControl;
if (checkbox.value) {
// remove the item from the model and the form
this.files.splice(i, 1);
this.filesFormArray.controls.splice(i, 1);
}
}
}
}

在HTML中，您仍然可以从文件构建，但也可以绑定到表单。您可以使用指令formGroupName、formArrayName和formControlName来匹配您在组件中构建的表单组的结构。

component.html

<form [formGroup]="form" (submit)="onSubmit()">
<div formArrayName="files">
<div *ngFor="let file of files; let i = index" [formGroupName]="i">
<input type="checkbox" formControlName="delete" />
</div>
</div>
<button>Remove files</button>
</form>

//首次安装jQuerynpm安装--保存jquery

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

在像一样构建的angular.json script: []阵列中添加jquery路径

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

相关内容

最新更新

热门标签：