angular实现多重数据筛选，封装post接口，JSON.stringify() ，接口返回数据乱码，splice()，数组删除数据，有的数据显示有的不显示

使用http服务需要在app.module.ts引入http模块

import {  HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [ HttpClientModule]
})

后台给的接口示例：

xx.service.ts，封装接口

  //获取快捷导航（带权限）--- 第一次获取带权限的接口
  getMenuItem(idOrCodeKey: string, idOrCodeValue: string, withChildren: boolean = false, permission: boolean = true) {
    return this.http.get(`/api/cms/cs/v1.0/menuitem?${idOrCodeKey.toLowerCase()}=${idOrCodeValue}&withoffspring=${withChildren}&permission=${permission}`);
  }
 //获取快捷导航（GS7里控制权限）--- 第二次获取带权限的接口
  getNavItem(UserCode, Phone, Menus: Array<string>) {
    //JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串，因为后台给的接口是这个格式
    let usercode = JSON.stringify(UserCode)
    let phone = JSON.stringify(Phone)
    let jsonarr = JSON.stringify(Menus)
    const body = {
      "strPara": `{"UserCode": ${usercode},"Phone": ${phone},"Menus": ${jsonarr}}`
    }
    //根据主机名判断请求接口的ip地址
    if(window.location.hostname==="192.168.224.114" || window.location.hostname==="localhost"){
      this.showip="192.168.224.112"
    }else if(window.location.hostname==="192.168.224.113"){
      this.showip="192.168.224.111"
    }
    return this.http.post(`http://${this.showip}/cwbase/jtgl/Srv/CheckMenuPerm.asmx/CheckMenuPermMethod`, body);
  }

xx.component.ts通过接口获取数据

//获取导航内容
    this.api.getCurUserInfo().subscribe(data => {
      this.userCode = data.code
      this.phone = data.mobilePhone
      this.api.getMenuItem('code', 'TYDLRK', true, true).subscribe(
        (res) => {
          console.log('TYDLRK=====', res)
          this.menuItem = res.children
          this.menuItem.forEach(item => {
            this.newMenu.push({ code: item.code, IsShow: true })
          })
          this.api.getNavItem(this.userCode, this.phone, this.newMenu).subscribe(data => {
            this.navigation = data.menus
            if (this.menuItem.length !== 0 && this.navigation.length !== 0) {
              for (let i = 0; i < this.navigation.length; i++) {
                for (let j = 0; j < this.menuItem.length; j++) {
                  if (this.navigation[i].isShow === false) {
                    if (this.navigation[i].code === this.menuItem[j].code) {
                    this.menuItem.splice(j, 1)
                    this.menuArr= this.menuItem  
                    }
                  }else {
                    this.menuArr= this.menuItem  
                  }
                }
              }
            }
          })
        },
        (error) => {
          console.log(error);
        }
      );
    })

menu中的数据默认是全部显示的

xx.html

<div class="menu-item" *ngIf="menuArr">
                <ul>
                  <li *ngFor="let nav of menuArr; let i=index" >
                    <a href="{{nav.url}}" target="_blank">
                      <div class="img-wrapper">
                        <img [src]="'assets/img/' + nav.icon" alt="">
                      </div>
                      <div class="name">{{nav.title}}</div>
                    </a>
                  </li>
                </ul>
</div>

出现的问题-----请求的接口返回的数据有乱码

我封装的接口：

后台给的接口是正常的：

解决办法：

getNavItem(UserCode, Phone, Menus: Array<string>) {
		//JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
        let usercode = JSON.stringify(UserCode)
        let phone = JSON.stringify(Phone)
        let jsonarr = JSON.stringify(Menus)
        const body = {
            "strPara": `{"UserCode": ${usercode},"Phone": ${phone},"Menus": ${jsonarr}}`
        }
        return this.http.post(`http://192.168.224.112/cwbase/jtgl/Srv/CheckMenuPerm.asmx/CheckMenuPermMethod`, body);
    }

出现的问题-----写的接口，部署在服务器上自动出现一长串路径

因为后台已经封装了一套匹配路径，默认使用后台封装好的路径

解决办法：
ip地址前面增加http

出现的问题----页面上数据显示出来后，3s后数据刷新变少

因为我写代码的时候循环的是A数组，在后台代码中A数组有值后，又进行了一次删除数据的操作，就造成了页面上数据变化的问题。
解决办法：
A数组供数据操作用，将A数组的最终值赋值给B数组，页面上展示B数组的数据

出现的问题----当第二次获取的数据全为true时，页面上不显示任何数据

有的获取的数据显示有的不显示，有false的就显示，全true的就不显示

原因：this.menuArr是个空数组，当isShow=false的时候menuArr有值。假如第二次获取的数据isShow全为true，代码里没有给menuArr赋值，页面上找不到数据，所以不显示任何东西。
在代码里加个判断

else {
        this.menuArr= this.menuItem  
      }