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

已经尝试在每个

上附加（点击）功能，以便在点击

项目时删除（或执行您想要的操作）？...类似于：

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

希望它可以帮到你!!

Answer 2

@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;

    }

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

2 个答案: