не может удалить конкретного пользователя в модальном - PullRequest
Новая
       9

не может удалить конкретного пользователя в модальном

0 голосов
/ 24 октября 2018

Я пытаюсь удалить конкретного пользователя.Я смог сделать это, пока я нажимал кнопку удаления.Кнопка теперь я добавил модальное отображение подтверждения, если я уверен, что хочу удалить или нет.Но когда я нажимаю кнопку удаления на модальной странице, я получаю сообщение об ошибке свойства undefined. Как ее решить?

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');
}
)
}

console error

1 Ответ

0 голосов
/ 24 октября 2018

это потому, что он не получает значение person, так как модальное значение находится вне * ngFor, поэтому вы можете создать переменную для удаляемого элемента, как этот компонент .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>
...