Question

在寻找了两个小时的解决方案之后，我决定问一些专业人士，怀疑解决方案可能很简单。

这是一个Angular7项目。我想在我的目标组件中使用“ +”按钮作为一个“目标”。当您单击该按钮时，我想将另一个目标添加到页面中。因此，我想单击目标组件的按钮以创建一个新目标，这对我来说是递归的。

goals.component.html：

<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal id="{{lastGivenId+1}}"></app-goal>

goals.component.ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-goals',
  templateUrl: './goals.component.html',
  styleUrls: ['./goals.component.scss']
})
export class GoalsComponent implements OnInit {
  lastGivenId: number = 0;
  constructor() { }

  ngOnInit() {
  }

}

goal.component.ts和Goal.component.html：

//Typescript code
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-goal',
  templateUrl: './goal.component.html',
  styleUrls: ['./goal.component.scss']
})
export class GoalComponent implements OnInit {
  @Input() id : number;

  constructor() { }

  ngOnInit() {
  }
  onAddLowerGoal(currentGoalID:number){
    // var goalElement = document.registerElement('app-goal');
    // document.body.appendChild(new goalElement());
    let newGoal = document.createElement("app-goal");
    newGoal.setAttribute("id", "999");
    let currentGoal = document.getElementById(currentGoalID.toString());
    document.body.insertBefore(newGoal, currentGoal);
  }
}

<html>
<div id="{{id}}" class="goal">goal{{id}}</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
</html>

这样，它创建了一个app-goal元素，但是app-goal元素中的div和button元素丢失了。如何解决这个问题？欢迎任何帮助。预先感谢。

Answer 1

我认为您正在寻找的是带有FormArray且具有动态添加的表单控件的反应性表单。

看看这个，例如：

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

@Component({...})
export class GoalsComponent  {

  goalsForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.goalsForm = this.fb.group({
      goals: this.fb.array([])
    });
  }

  onFormSubmit() {
    console.log('Form Value: ', this.goalsForm.value);
  }

  get goals() {
    return (<FormArray>this.goalsForm.get('goals')).controls;
  }

  addGoal() {
    (<FormArray>this.goalsForm.get('goals')).push(this.fb.control(null));
  }

}

这是此模板：

<h2>Goals:</h2>
<form [formGroup]="goalsForm" (submit)="onFormSubmit()">
  <button type="button" (click)="addGoal()">Add Goal</button>
  <hr>
  <div *ngFor="let goal of goals; let i = index;" formArrayName="goals">
    <div>
      <label for="goal">Goal {{ i + 1 }}: </label>
      <input type="text" id="goal" [formControlName]="i">
    </div>
    <br>
  </div>
  <hr>
  <button>Submit Form</button>
</form>

这是您推荐的Sample StackBlitz。

Answer 2

乍看之下：从html文件中删除goal.component.html标签。

下一步：您可以使用angular递归添加app-goal。以javascript方式插入app-goal元素只会添加<app-goal></app-goal>对象。它不会创建角度分量。它不会绑定您的数据。

此外，如果您使用的是Angular的@Input，则需要为组件输入分配方括号。不要使用标签。

goals.component.html：

<input type="text" value="Ich brauche einen Laptop für maximal 1000 Euro.">
<br/>
<br/>
<app-goal [id]="lastGivenId+1"></app-goal>

goal.component.html：

<div id="{{id}}" class="goal">goal{{id}}</div>
<button id="AddLowerGoal1" (click)="onAddLowerGoal(999)">+</button>
<div *ngFor="let subGoal of subGoals">
  <app-goal [id]="subGoal.id"></app-goal>
</div>

goal.component.ts：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-goal',
  templateUrl: './goal.component.html',
  styleUrls: ['./goal.component.scss']
})
export class GoalComponent implements OnInit {
  @Input() id : number;
  subGoals: Array<any> = [];

  constructor() { }

  ngOnInit() { }

  onAddLowerGoal(currentGoalID: number){
    this.subGoals.push({id: currentGoalID});
  }
}

您还可以使用一项服务来存储您的目标和子目标，以供日后使用。

可能会递归使用Component吗？

2 个答案: