angular5 在模式列表中添加或编辑项目

Question

我正在尝试编辑列表中的项目。我想在模式中显示点击的项目（包含所有值，以便我可以检查 null id 并使用模式来添加项目）

知道我该怎么做吗？

我目前拥有的：

<div class="container">

  <!-- The table displaing the list of item -->
  <table class="table table-sm table-hover">
    <tr>
      <button class="btn btn-danger">
        <i class="fa fa-add"></i>Remove</button>
      <button class="btn btn-success" data-toggle="modal" data-target="#addOrUpdateModal">
        <i class="fa fa-add"></i>Add policy</button>
    </tr>
    <tr>
      <th class=""></th>
      <th>#</th>
      <th>Name</th>
      <th>Options</th>
    </tr>
    <tr *ngFor="let policy of dataSource | paginate: { itemsPerPage: 10, currentPage: p }">
      <td>
        <input type="checkbox"> </td>
      <td>{{policy.id}}</td>
      <td>{{policy.name}}</td>
      <td>
        <a class="btn" (click)="showForEdit(policy)" data-toggle="modal" data-target="#addOrUpdateModal">
          <i class="fa fa-pencil-square-o"></i>
        </a>
        <a class="btn text-danger" (click)="delete(policy.id)">
          <i class="fa fa-trash-o"></i>
        </a>
      </td>
    </tr>
  </table>

</div>
<!-- Pagination directive -->
<div class="container">
    <pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>


<!-- the modal i'd like to use for add and update data -->

<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addOrUpdateModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle"></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">

            <!-- The inputs i want to fill with clicked item -->
            <input type="hidden" class="form-control" value=""/>
            <input type="text" class="form-control" placeholder="Name" value=""/>

          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="addOrUpdate()">Do smthg</button>
      </div>
    </div>
  </div>
</div>

我不知道如何将数据传递给模态，因为模态不在 ngFor 中。我应该将数据传递给我的控制器，然后让控制器以某种方式显示模态...？

（Angular5 / typescript 和 javascript 的新手。就像.. 3 周经验，所以，对于愚蠢的问题......）

虽然：如果有人有一本像 "angular and typescript for newbies" 这样的好书，我现在就买！ :D

Answer 1

试试这个，这里我使用了两种方式的数据绑定。

打字稿文件，

    //here declared variable
    name:any;
    id:number;

    showForEdit(policy){
      //here you can access your *ngFor looped dataSource data like (policy.id, policy.name)
      this.name=policy.name; //here iam assinging name value to variable.
      this.id=policy.id;
    }

   addOrUpdate(){
      console.log("Your Name Data here",this.name);
      console.log("Your Id Data here",this.id);
   }

Html 文件,

 <form role="form">
      <div class="form-group">            
            <input type="hidden" class="form-control" name="id" [(ngModel)]="id" value=""/>
            <input type="text" class="form-control" name="name" [(ngModel)]="name" placeholder="Name" value=""/>
       </div>
 </form>

更多学习相关细节请访问官方文档here.Here官方文档对入门学习很有用angular.

https://angular.io/guide/forms

编辑：-

确保您必须添加 app.module.ts 文件，

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

 imports: [
    FormsModule, //here
    ReactiveFormsModule,
 ]

对于重置，

this.name='' 
this.id='';

如果你像这样使用表单，

this.form_name.reset();

参考站点，

angular5 在模式列表中添加或编辑项目

angular5 add or edit item from list in a modal

list

modal-dialog

edit

typescript

angular5