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

Question

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

$ npm install jquery --save

我正在尝试将 html 网页的 .js 数据传输到 app.component.ts angular。我对 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;

Answer 1

// 第一次安装 jQuery npm install --save jquery

// 和 jQuery 定义 npm install -D @types/jquery

在angular.json script: [] array under build like

中添加jquery路径

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

然后在 import 语句后添加 declare var $:any; 并且 jquery 准备好使用

Answer 2

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

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

component.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 将反映文件数组中的任何内容。因此，如果您想 "unbuild" 您的列表，只需从数组中删除项目即可。

诚然，当您必须考虑诸如复选框数组之类的事情时，这有点棘手，但这不是求助于使用 jQuery.

的借口

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

在您的应用模块中导入响应式表单模块：

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule 
  ]
}

在您的组件中，您需要从 @angular/forms 注入 FormBuilder。然后在您拥有模型（可能在服务订阅中）后构建一个表单。

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

component.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>

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

Use of jQuery code in Angular app.component.ts

javascript

jquery

html

angular

angular9