使用角度 4 从菜单列表中删除单击的项目

Question

你好，

我有一个通知菜单列表，我在其中绑定来自 REST API 的数据。我的通知菜单将如下所示。为清楚起见，请参见下图。

在通知中，当我单击任何列表项时，它应该从列表中删除，并且在上面还有一个红色的通知气泡，其中包含我收到的通知数量。我想要实现的是，当我单击通知菜单列表时，应从其中删除单击的列表项，并且在铃铛图标上方的红色气泡中计数应减少。例如，当我单击第一项的通知列表项时，应将其删除并减少计数。

notification.component.ts

try {

      this.currentUser = JSON.parse(this.cookieService.get('user-is-logged-in-details'));
      console.log(this.currentUser.uid);
      this._userService.getBellNotification(this.currentUser.uid)
      .subscribe(data => this.cookieData = data); 
      } catch (e) {
          console.log("Catch Block Error from Notification.Component.ts");
          //console.log("currentUser", this.currentUser.uid);
      }

apiservice.service.ts

getBellNotification(uid: any){
        const urlBell = this.config.apiUrl+'api/supplier-notification/'+uid+'?_format=json';
        let headers = new Headers();        
        headers.append("Content-Type", 'application/json');
        headers.append('Authorization', 'Basic ' + btoa('apiuser:@piUser@2017Supplier'));
        let requestoptions = new RequestOptions({headers: headers});
        return this.http.get(urlBell, requestoptions)
        .map(response => response.json())
        .catch(this.handleErrorObservable);
    }

notification.component.html

<span 
    class="notification" 
    dropdown (onShown)="onShown()" 
    (onHidden)="onHidden()" 
    (isOpenChange)="isOpenChange()">
    <a
        href dropdownToggle 
        (click)="false">
        <i 
        class="glyphicon glyphicon-bell" 
        [ngClass]="cookieData?.search_unread_count != 0 ? 'notification-icon': ' '">
    <span *ngIf="cookieData?.search_unread_count != 0">{{cookieData.search_unread_count}}</span> 
    </i>
    </a>
      <ul 
        *dropdownMenu 
        class="dropdown-menu notify-drop">
          <div 
            class="notify-drop-title">Notifications</div>
            <div 
                class="drop-content" 
                *ngFor="let item of cookieData.search_result">
                <li 
                    data-id="{{item.id}}" 
                    class="notification-items unread">  
                    <i 
                        class="fa fa-dot-circle-o" 
                        aria-hidden="true">
                    </i>
                    <a 
                        data-link="admin-invoice-list" 
                        href="javascript:;">{{item.message}}
                    </a>
                </li>
            </div>
      </ul>
</span>

谁能建议我如何实现它？

Answer 1

@federico scamuzzi ise 解释了你到底错过了什么。但他的回答是需要对您的对象和要求进行一些修正。我在这里更新了，试试看，如果你有任何澄清，请告诉我。

           <div 
            class="drop-content" 
            *ngFor="let item of cookieData.search_result">
            <li (click)="remove(item)"
                data-id="{{item.id}}" 
                class="notification-items unread">  
                <i 
                    class="fa fa-dot-circle-o" 
                    aria-hidden="true">
                </i>
                <a 
                    data-link="admin-invoice-list" 
                    href="javascript:;">{{item.message}}
                </a>
            </li>

你的删除功能应该是

remove(item:any){
    //ALSO CALL A BACKEND API... TO REMOVE THEM .. THIS IS ONLY FRONT END
    this.cookieData.search_result = this.cookieData.search_result.filter(xx=>xx.id != item.id);
    this.cookieData.search_unread_count=this.cookieData.search_result.length;

    }

Answer 2

您是否尝试在每个上附加（点击）功能

以便在点击

时删除（或执行您想要的操作）

项目？...类似于：

 <div 
                class="drop-content" 
                *ngFor="let item of cookieData.search_result">
                <li (click)="remove(item)"
                    data-id="{{item.id}}" 
                    class="notification-items unread">  
                    <i 
                        class="fa fa-dot-circle-o" 
                        aria-hidden="true">
                    </i>
                    <a 
                        data-link="admin-invoice-list" 
                        href="javascript:;">{{item.message}}
                    </a>
                </li>

然后在你的ts file:

   remove(item:any){
    //ALSO CALL A BACKEND API... TO REMOVE THEM .. THIS IS ONLY FRONT END
    this.cookieData = this.cookieData.filter(xx=>xx.id != item.id);
      this.cookieData.search_unread_count=this.cookieData.search_result.length;
    }

希望对你有帮助！！