Angular 7相当于angularJS代码用于元素克隆[关闭]

Question

我正在学习Angular。我有一个项目用于学习目的。我在this example中我想添加无限项类型的部分。

;(function () {
   'use strict';

   var DemoController = function($scope){
      $scope.selectData = [
         {
            'name':'Rasmus Lerdorf',
            'lang':'PHP'
         },
         {
            'name':'James Gosling & Patrick Naughton',
            'lang':'Java'
         }
      ];
      $scope.informations = [
         {
           'inputName' : '',
           'inputSelect' : '',
            'inputCheckbox' :'',
            'optionsRadios' : ''
         }
      ];

      $scope.cloneItem = function () {
         var itemToClone = { 
            'inputName': '', 
            'inputSelect': '',
            'inputCheckbox':'',
            'optionsRadios': ''
         };
         $scope.informations.push(itemToClone);
      }

      $scope.removeItem = function (itemIndex) {
         $scope.informations.splice(itemIndex, 1);
      }

      $scope.submitForm = function() {

      }
   }
   angular
      .module('app', [])
      .controller('DemoController' , DemoController);
      DemoController.$inject = ['$scope'];
})();

我知道这个例子很老了。可能来自Angular 1.我找不到元素克隆的例子。

如果您能帮助我理解Angular7中克隆元素的工作原理，我将不胜感激。

Answer 1

你的代码是AngularJS，而不是Angular。

您有一个模型的数据结构。

export interface Developer {
  name: string;
  language: string;
  selected: boolean;
}

然后使用它们的数组创建一个组件

  developers: Developer[] = [{ name:'', language: '', selected: false }];

  add() {
    this.developers.push({ name:'', language: '', selected: false });
  }

并且在视图中你可以通过数组。

<ng-container *ngFor="let developer of developers;let i = index">
  <input [name]="'name_' + i" [(ngModel)]="developer.name" type="text">
  <select [name]="'language_' + i" [(ngModel)]="developer.language">
    <option>PHP</option>
    <option>Java</option>
    <option>Angular</option>
    <option>TypeScript</option>
  </select>
  <input [name]="'selected_' + i" [(ngModel)]="developer.selected" type="checkbox">
  <br>
</ng-container>

<button (click)="add()">Add</button>

学习Angular的最佳方式是在StackBlitz https://stackblitz.com/edit/angular-ksgsnm?file=src/app/app.component.html上玩