无法删除模式用户

Question

我正在尝试删除特定用户。当我单击删除按钮时，我能够做到这一点。现在，如果我确定要删除，则按钮添加一个显示确认的模式。但是，当我单击模式上的删除按钮时，出现属性未定义的错误。如何解决？

  

component.html

<tbody>
        <tr *ngFor="let person of persons">
          <td>{{ person.user.id }}</td>
          <td>{{ person.user.first_name}}</td>
          <td>{{ person.user.last_name }}</td>
          <td>{{ person.user.email }}</td>
          <td>{{ person.role }}</td>
          <td>
            <label class="switch" *ngIf="Authentication.roleMatch(['change status'])">
                <!-- <p *ngIf="Authentication.roleMatch(['change status'])">
                    <input type="checkbox" (click)="toggle(person)" [(ngModel)]="person.user.is_active" [disabled]="person.user.is_superuser=== true">
                  </p> -->

                  <input  type="checkbox" (click)="toggle(person)" [(ngModel)]="person.user.is_active" [disabled]="person.user.is_superuser=== true">

                <span class="slider round"></span>
            </label>
        </td>
        <td>
        <p *ngIf="Authentication.roleMatch(['edit user'])">
            <a  class="edit" (click)="onSelect(person)" data-toggle="modal" data-target="#editModal"><img src="../../../assets/images/edit.png" alt=""></a> 
          </p>
          </td>

          <td>

**//delete modal**

          <p *ngIf="Authentication.roleMatch(['delete user'])">
              <a  class="delete"  data-toggle="modal" data-target="#deleteModal" ><img src="../../../assets/images/delete (1).png" alt=""></a>
          </p>

        </td>
        </tr>
      </tbody>


<!-- Delete User -->
<!-- The Modal -->
<div class="modal" id="deleteModal">
<div class="modal-dialog">
<div class="modal-content">


  <!-- Modal body -->
  <div class="modal-body">
    Are you sure you want to delete this user?
    <br>

    <div>

     //error shows here
      <a (click)="delete_user(person.user.id)"><i class="fa fa-check right"  aria-hidden="true"></i></a>
      <a ><i class="fa fa-times wrong" data-dismiss="modal" aria-hidden="true"></i></a>
    </div>

  </div>


</div>

  

component.ts

//Delete user

delete_user(id){

this.Authentication.delete_user(id).subscribe(
data =>{
  console.log('deleted user');
 this.getUsersFromServices();

},err => {
  console.log('error occured while deleting user');
}
)
}

Answer 1

这是因为模态在* ngFor的外面，所以没有得到person的值，因此您可以像这样为要删除的项目创建一个变量 component.ts

itemToBeDeleted:any;//declare the variable

以html

<tbody>
        <tr *ngFor="let person of persons">
          <td>{{ person.user.id }}</td>
          <td>{{ person.user.first_name}}</td>
          <td>{{ person.user.last_name }}</td>
          <td>{{ person.user.email }}</td>
          <td>{{ person.role }}</td>
          <td>
            <label class="switch" *ngIf="Authentication.roleMatch(['change status'])">
                <!-- <p *ngIf="Authentication.roleMatch(['change status'])">
                    <input type="checkbox" (click)="toggle(person)" [(ngModel)]="person.user.is_active" [disabled]="person.user.is_superuser=== true">
                  </p> -->

                  <input  type="checkbox" (click)="toggle(person)" [(ngModel)]="person.user.is_active" [disabled]="person.user.is_superuser=== true">

                <span class="slider round"></span>
            </label>
        </td>
        <td>
        <p *ngIf="Authentication.roleMatch(['edit user'])">
            <a  class="edit" (click)="onSelect(person)" data-toggle="modal" data-target="#editModal"><img src="../../../assets/images/edit.png" alt=""></a> 
          </p>
          </td>

          <td>

**//delete modal**

          <p *ngIf="Authentication.roleMatch(['delete user'])">
              <a  class="delete"  data-toggle="modal" data-target="#deleteModal" (click)="itemToBeDeleted=person" ><img src="../../../assets/images/delete (1).png" alt=""></a>
          </p>

        </td>
        </tr>
      </tbody>


<!-- Delete User -->
<!-- The Modal -->
<div class="modal" id="deleteModal">
<div class="modal-dialog">
<div class="modal-content">


  <!-- Modal body -->
  <div class="modal-body">
    Are you sure you want to delete this user?
    <br>

    <div>

     //error shows here
      <a (click)="delete_user(itemToBeDeleted?.user?.id)"><i class="fa fa-check right"  aria-hidden="true"></i></a>
      <a ><i class="fa fa-times wrong" data-dismiss="modal" aria-hidden="true"></i></a>
    </div>

  </div>


</div>