Удалите определенный идентификатор в массиве, используя загрузчик модал-поп с угловым 6

Question

У меня проблемы с передачей идентификатора модалу из списка userSms. Продолжайте ждать, чтобы удалить первые пользовательские SMS-сообщения .Без использования модального всплывающего окна, если нажать кнопку «Удалить», он отправляет определенный идентификатор и все работает нормально, но если я использую загрузчик модального режима, я сталкиваюсь с этой проблемой.Помогите мне решить эту проблему, это будет оценено!

Здесь, если мы нажмем на последних пользователей, будет удален первый пользователь.Если вы попытаетесь удалить какой-либо из них, он будет удален только первым.

Здесь мой HTML -

<li class="activity activity-created" data-id="" *ngFor="let data of smsdata;>
        <div>
            <span class="timeline-icon">
                <span id="glphi" class="glyphicon  glyphicon-modal-window " aria-hidden="true"></span>
            </span>
            <div class="activity-inner created">
                <div class="view-side">
                    <span class="salesrep">
                        <img class="js-avatar user-img" width="32" height="32" alt="" src="" title="test t">
                        <span class="user-name" title="test t">Sent to {{data.to}}</span>
                    </span>
                    <span><i id="trash" class="glyphicon glyphicon-trash" style="color:red;" data-toggle="modal"
                            data-target="#Deletesms" ></i></span>

                             <!-- delete -->
        <div id="Deletesms" class="modal fade" role="dialog"  >
            <div class="modal-dialog deletedialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h3 class="modal-title">Delete</h3>
                    </div>
                    <div class="modal-body">
                        <p style="color:red">Would you Like To Delete SMS </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="smsDelete(data._id)">Delete</button>
                    </div>
                </div>

            </div>
        </div>

Здесь мой файл TS

smsDelete(smsid) {

console.log(smsid)
  this._leadService.deleteSms(smsid).subscribe(newdata => {
    this.smsdata = this.smsdata.filter(elem =>{
      return elem._id !== smsid ;
    });
    this.getSmsSend()
    this.getSmsReceive()
    console.log(' deleted successfully' + smsid)
  })
}

Answer 1

здесь, когда мы собираемся нацелиться на другой модал в это время, он не может получить конкретный идентификатор, поэтому нам нужно два метода

1) первый метод, нам нужно получить конкретный идентификатор по событию клика и сохранить этот идентификатор в переменной

2) второй метод, нам нужно вызвать этот идентификатор переменной как параметр в методе службы, чтобы он получал этот конкретный идентификатор и выполнял функцию удаления в этом

    <li class="activity activity-created" data-id="" *ngFor="let data of smsdata">
        <div>
            <span class="timeline-icon">
                <span id="glphi" class="glyphicon  glyphicon-modal-window " aria-hidden="true"></span>
            </span>
            <div class="activity-inner created">
                <div class="view-side">
                    <span class="salesrep">
                        <img class="js-avatar user-img" width="32" height="32" alt="" src="" title="test t">
                        <span class="user-name" title="test t">Sent to {{data.to}}</span>
                    </span>
                    <span><i id="trash" class="glyphicon glyphicon-trash" style="color:red;" data-toggle="modal"
                            data-target="#Deletesms" (click)="smsDelete(data._id)"></i></span>

                             <!-- delete -->
        <div id="Deletesms" class="modal fade" role="dialog"  >
            <div class="modal-dialog deletedialog">
                <div class="modal-content">
                    <div class="modal-header">
                            <div class="icon-box">
                                    <i class="material-icons"></i>
                                </div>              
                                <h4 class="modal-title">Are you sure?</h4>  
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                            <p>Do you really want to delete these records? This process cannot be undone.</p>
                    </div>
                    <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
                            <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="deletemsg()">Delete</button>
                        </div>
                </div>

            </div>
        </div>

        <!-- end delete -->




                    <small>
                        <time id="trash" class="timeago" rel="tooltip" dateTime="{{data.dateadded| date}}"> |
                            {{data.dateadded }} </time>
                    </small>
                    <div>{{data.message
                        }}   {{data._id}}</div>
                </div>
            </div>
        </div>


    </li>
</ul>

методы в тс

i) первый метод -

smsDelete(smsid) {
    this.msgId = smsid ; // **stored particular Id**
  }

ii) второй метод -

deletemsg(){
console.log(this.msgId)
this._leadService.deleteSms(this.msgId).subscribe(data => {
    console.log(data)
    this.getSmsSend()
    this.getSmsReceive()
   console.log(' deleted successfully' + this.msgId)
  })
  }

работает потрясающе ...... Надеюсь, это кому-нибудь поможет ....!