使用编辑按钮ANGULAR CLI创建ng-模板

时间:2018-11-28 09:23:22

标签: angular button bootstrap-4 ng-template

我想创建一个ng模板模型,因此,如果单击“编辑”按钮,它将在模型模板中向我显示名称中的确认,我可以对其进行编辑并保存或关闭该模板。 我怎样才能做到这一点? 我导入了引导程序。 谢谢您的帮助!

cohorts.component.html

<div class="container">
  <h1>Cohorts</h1>
  <div class="row">
    <div class="offset-3"></div>
    <div class="col-md-6">
      <form (ngSubmit)="addCohorte()">
        <div class="form-group">
          <label>Create new Cohorte:</label>
          <br>
          <input
            type="text"
            [(ngModel)]="data.name"
            [ngModelOptions]="{standalone: true}">
        </div>

        <button type="submit" class="btn btn-primary pull right">
          <i class="fa fa-envelope-o"></i>
          <span>Add Cohorte</span>
        </button>
      </form>
      <br>
      <table class="table table-striped table-bordered table-hover ng-scope">
        <thead>
        <tr>
          <th>Name</th>
          <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let cohort of cohorts">
          <td>
            {{cohort.name}}
          </td>
          <td>
            <button  class="btn btn-info" type="button" (click)="save(cohort.id)">Edit</button>

            &shy;
            &shy;
            &shy;
            <button class="btn btn-danger" type="button" (click)="deleteCohorte(cohort.id)">Delete</button>
          </td>
        </tr>
        <!-- ngRepeat: cohort in vm.entities | orderBy:'name':false -->
        </tbody>
      </table>
    </div>
  </div>
</div>

0 个答案:

没有答案