Angular Mat按钮在*ngFor内单击，使索引=索引不反应/触发动作

我目前正在从事一个项目，其中我有一个

反应式表单数组

，它将使用

*ngIf

显示在模板上。我认为这是正常的用例，没有什么特别的。但现在我把它建成这样

[...]
删除
添加

Delete

按钮不会对我的点击做出反应，但是

Add

按钮会做出反应。由于某种原因，当我删除

时，让index=index

再次工作，或者如果我将按钮置于此

*ngFor

之外

我希望你能帮助我。非常感谢你。到目前为止找不到任何解决方案

例如：

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl，FormGroup，FormArray，FormBuilder}；
@组成部分({
选择器：“我的应用程序”，
模板：`
出版
资格证书
添加
内部测试
外部测试
`,
})
导出类AppComponent{
表格：表格组；
构造函数（私有fb:FormBuilder）{
this.form=this.fb.group({
出版:对,，
凭据：this.fb.array（[]），
});
}
addCreds（）{
const creds=this.form.controls.credentials作为FormArray；
信任推送（this.fb.group）({
用户名：“”，
密码：“”，
}));
}
按钮点击{
console.log（'Clicked'）；
}
}

我不知道为什么，但正如您所说，当您使用按钮内部的指令

mat扁平按钮
测试外部时，
内部没有触发（单击）事件

如果卸下
mat扁平按钮
，它将工作：
外部测试

以下是我测试的代码：

应用程序组件.ts：

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>

        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
            <button class="mat-flat-button" (click)="testFunc()"> Test inside </button>
          </ng-container>
        </div>
        <button mat-flat-button (click)="testFunc()"> Test outside </button>

      </div>
    </form>
  `,
})
export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      username: '',
      password: '',
    }));
  }

  testFunc() {
    console.log('hello');
  }
}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl，FormGroup，FormArray，FormBuilder}；
@组成部分({
选择器：“我的应用程序”，
模板：`
出版
资格证书
添加
内部测试
外部测试
`,
})
导出类AppComponent{
表格：表格组；
构造函数（私有fb:FormBuilder）{
this.form=this.fb.group({
出版:对,，
凭据：this.fb.array（[]），
});
}
addCreds（）{
const creds=this.form.controls.credentials作为FormArray；
信任推送（this.fb.group）({
用户名：“”，
密码：“”，
}));
}
testFunc（）{
log（'hello'）；
}
}
我不知道为什么，但正如您所说，当您使用按钮内部的指令
mat扁平按钮
测试外部时，
内部没有触发（单击）事件

如果卸下
mat扁平按钮
，它将工作：
外部测试

以下是我测试的代码：

应用程序组件.ts：

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>

        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
            <button class="mat-flat-button" (click)="testFunc()"> Test inside </button>
          </ng-container>
        </div>
        <button mat-flat-button (click)="testFunc()"> Test outside </button>

      </div>
    </form>
  `,
})
export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      username: '',
      password: '',
    }));
  }

  testFunc() {
    console.log('hello');
  }
}

从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl，FormGroup，FormArray，FormBuilder}；
@组成部分({
选择器：“我的应用程序”，
模板：`
出版
资格证书
添加
内部测试
外部测试
`,
})
导出类AppComponent{
表格：表格组；
构造函数（私有fb:FormBuilder）{
this.form=this.fb.group({
出版:对,，
凭据：this.fb.array（[]），
});
}
addCreds（）{
const creds=this.form.controls.credentials作为FormArray；
信任推送（this.fb.group）({
用户名：“”，
密码：“”，
}));
}
testFunc（）{
log（'hello'）；
}
}
以下是工作示例，请检查链接

以下是工作示例，请检查链接

在@ashot aleqsanyan的帮助下，我终于找到了解决方案。原因尚不清楚。如果有人对此有解释，请告诉我们

解决方案：
将
form.controls.credentials？值
替换为
form.get（'credentials'）。html模板中的控件
起作用。之后，mat按钮再次在
*ngFor
中工作

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>

        <div formArrayName="credentials" *ngFor="let creds of form.get('credentials').controls; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
            <button mat-flat-button (click)="buttonClick()"> Test inside </button>
          </ng-container>
        </div>
        <button mat-flat-button (click)="buttonClick()"> Test outside </button>

      </div>
    </form>
  `,
})
export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      username: '',
      password: '',
    }));
  }

  buttonClick() {
    console.log('Clicked');
  }
}


从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl，FormGroup，FormArray，FormBuilder}；
@组成部分({
选择器：“我的应用程序”，
模板：`
出版
资格证书
添加
内部测试
外部测试
`,
})
导出类AppComponent{
表格：表格组；
构造函数（私有fb:FormBuilder）{
this.form=this.fb.group({
出版:对,，
凭据：this.fb.array（[]），
});
}
addCreds（）{
const creds=this.form.controls.credentials作为FormArray；
信任推送（this.fb.group）({
用户名：“”，
密码：“”，
}));
}
按钮点击{
console.log（'Clicked'）；
}
}
在@ashot aleqsanyan的帮助下，我终于找到了解决方案。原因尚不清楚。如果有人对此有解释，请告诉我们

解决方案：
将
form.controls.credentials？值
替换为
form.get（'credentials'）。html模板中的控件
起作用。之后，mat按钮再次在
*ngFor
中工作

import { Component } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>

        <div formArrayName="credentials" *ngFor="let creds of form.get('credentials').controls; let i = index">
          <ng-container [formGroupName]="i">
            <input placeholder="Username" formControlName="username">
            <input placeholder="Password" formControlName="password">
            <button mat-flat-button (click)="buttonClick()"> Test inside </button>
          </ng-container>
        </div>
        <button mat-flat-button (click)="buttonClick()"> Test outside </button>

      </div>
    </form>
  `,
})
export class AppComponent  {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }

  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      username: '',
      password: '',
    }));
  }

  buttonClick() {
    console.log('Clicked');
  }
}


从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl，FormGroup，FormArray，FormBuilder}；
@组成部分({
选择器：“我的应用程序”，
模板：`
出版
资格证书
添加
内部测试
外部测试
`,
})