Question

我有一张md卡，其中我写了内容，当我点击添加按钮时，我必须在当前的md卡下方获得相同的md卡内容，并且必须继续添加，有多少我点击它。

当我点击添加按钮时，我需要相同的位置字段来到位置以下。

HTML：

<md-card layout="column" class="border-top-3px col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
                        <div class="clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <button md-mini-fab class="md-fab md-mini add-task" mdTooltipPosition="below" mdTooltip="Add" aria-label="New Task" (click)="openAdd()" style="bottom: 70%; right: 2%;">
                        <md-icon style="color:white;">add</md-icon>
                        </button>
                            <h6 class="color-primary md-headline" style="font-size:18px;">Adding</h6>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size:13px;">
                            <md-input-container>
                                <input mdInput type="text" name="workName" [(ngModel)]="workName" placeholder="Work Name" required />
                            </md-input-container>
                            <md-input-container>
                                <input mdInput type="text" name="workName" [(ngModel)]="workName" placeholder="Work Name" required />
                            </md-input-container>
                        </div>
                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size: 13px;
                    text-align: left;">
                            <md-input-container>
                                <input mdInput type="text" name="workName" [(ngModel)]="workName" placeholder="Work Name" required />
                            </md-input-container>
                            <md-input-container>
                                <input mdInput type="text" name="workName" [(ngModel)]="workName" placeholder="Work Name" required />
                            </md-input-container>
                    </md-card>

Answer 1

初始化组件中的set_error_handler(function() { throw new Exception(); }, E_WARNING); try{ $exifData = exif_read_data($filePath); } catch (Exception $e) { $exifData = false; } finally { restore_error_handler(); } if(!$exifData) { // do something }。

使用该数组并绑定postions array

组件：

*ngFor

HTML：

export class Component {
    positions = [{ workName: '', work: ''}];
    constructor() {}
    public addPosition() {
      this.positions.push({ workName: '', work: ''});
    }
}

检查ngModel的绑定：

<md-button (click)="addPosition()" md-no-ink class="md-primary">Add new position</md-button>

    <md-card *ngFor="let pos of positions; let i = index" layout="column" class="border-top-3px col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
      <div class="clearfix col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <button md-mini-fab class="md-fab md-mini add-task" mdTooltipPosition="below" mdTooltip="Add" aria-label="New Task" (click)="openAdd()"
          style="bottom: 70%; right: 2%;">
          <md-icon style="color:white;">add</md-icon>
        </button>
        <h6 class="color-primary md-headline" style="font-size:18px;">Adding</h6>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size:13px;">
        <md-input-container>
          <input mdInput type="text" name="workName_{{i}}" [(ngModel)]="pos.workName" placeholder="Work Name" required />
        </md-input-container>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="font-size: 13px;
                        text-align: left;">
        <md-input-container>
          <input mdInput type="text" name="work_{{i}}" [(ngModel)]="pos.work" placeholder="Work" required />
        </md-input-container>
    </md-card>

对于（+）按钮我添加了一个按钮，请检查：

<input mdInput type="text" name="work_{{i}}" [(ngModel)]="pos.work" placeholder="Work" required />

Answer 2

你可以在每个卡存储1个元素的组件中声明一个数组，然后你可以在点击时推送一个项目，最后在模板上你只需要使用ngFor来重复数组中每个项目的元素。

更新

以此为例

import {Component, bootstrap} from 'angular2/angular2';

@Component({
  selector: 'my-app',
  template: `
    <h1 *ngFor="let el of elements">HELLO</h1>
    <button (click)="addElement()">Add element!</button>
  `
})
export class MyApp {

  constructor() {
    this.elements = new Array();
  }

  public addElement() {
    this.elements.push(1);
    console.log(this.elements);
  }
}

bootstrap(MyApp);

如何使用angular2或typescript单击添加按钮时重复相同的md-card内容

2 个答案: