在 reducer 中为 component.html 中的多个 mat-slide-toggle/checkboxes 调用相同的函数

Question

我是 angular 和 ngrx 的新手，我正在开发一个用户可以生成表单的项目。用户可以选择从侧边栏添加多个表单元素（例如标签、文本字段、下拉菜单、复选框等）。在每个生成的表单元素旁边有两个按钮，删除和选项，现在我必须在这两个按钮旁边添加一个 slide-toggle/checkbox（如下图所示）。

======================================== ==============

component.html

<!-- sidebar for adding formelements-->

<div id="add-element-div">
    <button mat-icon-button matTooltip="Label"
            (click)="store.dispatch(createAction.editorAddLabel(currentPageNumber))">
      <mat-icon class="color">label</mat-icon>
    </button>
.....
</div>

<!-- option buttons for every element-->
<div class="ElementOptionButtons">

<button mat-icon-button
 (click)="store.dispatch(this.createAction.editorRemoveElement(currentPageNumber,
 currentForm.pages[currentPageNumber].pageElements.indexOf(FormularElement)))"
 matTooltip="Delete">
 <i class="material-icons">delete</i>
</button>
....


<!-- toogle-slider/checkbox -->


  <mat-slide-toggle
    *ngIf="FormularElement.type!=='label'"

    (change)="store.dispatch(createAction.editorAddAsRequired(currentPageNumber,
    currentForm.pages[currentPageNumber].pageElements.indexOf(FormularElement)))" 
    matTooltip="Pflichtfeld">
    <p>{{i}}</p>
  </mat-slide-toggle>

</div>

reducer.ts

   case fromEditorForm.EDITOR_ADD_AS_REQUIRED: {
      const changedState = JSON.parse(JSON.stringify(state));
      console.log('Reducer: mark as required');
      console.log(" element: " + action.elementIndex + " pageNumbeR: " + action.pageNumber );
      //changedState.form.pages[action.pageNumber].pageElements[action.elementIndex].required=true;
      return changedState;
    }
      return changedState;

component.ts

export class EditorComponent implements OnInit {
  public chosenBusinessType;
  public currentForm: Form;
  public currentPage: FormularPage;
  public currentPageElements: FormElement[];
  public currentPageNumber;

  public loadedForms: Form[];

  public createAction = new ActionFactory();

  constructor(private store: Store<fromStore.GeneratorState>,
              private formsService: FormsService,
              private route: ActivatedRoute) {

    this.store.select(fromStore.getLoadedForms).subscribe((forms) => {
      this.loadedForms = forms.entities;
    });
  }

  ngOnInit() {
    this.currentPageNumber = 0;
    this.route.params.subscribe(params => {
      if (params.id === 'newForm') {
        console.log('EDITOR: Aufgerufen zum Erstellen eines neuen Formulars');
        this.currentForm = new Form();
      } else {
        console.log('EDITOR: Aufgerufen zum Bearbeiten eines existierenden Formulars');
        for (const form of this.loadedForms) {
          if (form.id === params.id) {
            this.currentForm = form;
          }
        }
      }
      this.store.dispatch(this.createAction.editorChangeForm(this.currentForm));


      this.store.select(fromStore.getFormInEditor).subscribe((object) => {
        this.currentForm = object.form;
        this.chosenBusinessType = this.currentForm.businessType;
      });
    });
  }

======================================== ==============

我想要什么

选中 slide-toggle/checkbox 时，元素应标记为必需。我想为所有滑块添加一个方法（更改）。

什么问题

当我尝试滑动滑块时，所有滑块都将设置为 true 或什么都没有发生（取决于我的尝试）。如果我在 html 中没有 (change) 然后我切换的滑块被切换，而不是其他的，只要我在 (change)出现所有滑块的问题或none。

我尝试了什么

我为滑块添加了一个索引（如上图所示）以确保每个滑块都有不同的 ID。如果我单击滑块，它会记录正确的 formElement，但不会检查滑块。

当然，我在 Whosebug/google 上搜索过类似的问题，是接近我的问题。不同之处在于没有 ngrx，他用不同的方法切换每个滑块。但我想我的问题是因为滑块是双向绑定的？

接下来我要做什么

对于侧边栏中的每个添加元素，都会执行一个函数（在 reducer.ts 中）以推送一个新的 FormElement (component.ts)。我会创建一个函数，每次将一个元素添加到 FormElement 时都会执行，该函数还会添加一个滑动切换元素，但我不知道这是否是最佳实践

=======

正如我所说，我是 Angular 和 ngrx 的新手，如果我缺少一些重要的基础知识，请 link articles/examples。如果您需要更多代码或其他任何东西，我可以更新 post。

Answer 1

自己找到解决办法。

整个事情都包裹在一个 div 和一个 ngFor 循环中。然后我为滑块添加了一个 ngModel，我还添加了一个 elemntSlider 作为模型到整个表单模型，现在添加（elementSlider）到添加到表单的每个元素。

         <mat-slide-toggle
          *ngIf="FormularElement.type!=='label'"
          [(ngModel)]="FormularElement.elementSlider"
        </mat-slide-toggle>

在 reducer 中为 component.html 中的多个 mat-slide-toggle/checkboxes 调用相同的函数

Call same function in reducer for multiple mat-slide-toggle/checkboxes in component.html

typescript

ngrx

angular

angular6

ngrx-reducers