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 });
  }

在视图中你 ngFor 遍历数组。

<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