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的新功能/打字稿和javascript。例如，在这3星期内都是这样，对于愚蠢的问题感到抱歉...）

尽管：如果某人有一本好书，例如“新手的角度和打字稿”，我现在就买！：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>

有关学习的更多详细信息，请访问此处的官方文档。这里的官方文档对于开始学习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();

参考站点，

Reset input value in angular 2

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

1 个答案: