The problem is that the foreach is iterating over the same object you are removing things from. To avoid this behavior clone the object you are iterating before the loop and work with them as separate:

// ... code
var arrCopy = $scope.seaDocument.datas.cages.slice(); //this will create a deep copy.

angular.forEach(arrCopy, function(itemLocalCages) {
  iIndex++;
  if (itemLocalCages.url == url) {
    $scope.seaDocument.datas.cages.splice(iIndex,1);
  }
});
//... more code

slice() is the method of the Array, but you are calling it for the object.

Use Object.values() to make it to array.

export class AppComponent {
  color: string = 'green';
  public stocklist = [];
  public objectKeys = Object.keys;
  constructor() {
    let url = 'http://localhost:8080/stocks';
    axios.get(url).then(res =>{
      this.stocklist = Object.values(res.data.result[0]).slice(0,10);
      console.log(this.stocklist);
    })
  }
}

.slice is a method available from the array prototype.

Your faqData is defined as a plain 'ol object. As such it does not have access to .slice.

Your service is mutating faqData into an array however giving you access to .slice, this is only when it resolves.

So, the issue is your watcher may fire before your promise resolves meaning your trying to call slice from a plain object.

You should define your objects to the type you will be using them with, avoid mutating objects where possible.

Your watch may also need to handle the fact your promise has not resolved yet, that depends on what you intend to do in the watcher.

slice docs

<p class="break-word-text" >
    <span *ngIf="enumValues && enumValues.length > 10">{{enumValues.slice(0, 10)}} <a href="#" title="{{enumValues}}">View more</a></span>
    <span *ngIf="enumValues && enumValues.length <= 10">{{enumValues}}</span>
</p>

Just remove "(double quotes) from the start and end variable

Copy<ion-item *ngFor='let item of items | slice:start:end'>

You should do that on callback of .subscribe or else you will need to make latestproducts a subject and then subscribe to it.

this.productservice.getProductsByNewest()
    .subscribe(res => {
      this.latestproducts = res;
      this.slicedArray = res.slice();
    }
);

And then do ngFor on slicedArray.

When you are assigning this.mainList to this.filteredList you are copying the reference. So any actions you perform on one list will affect the other.

Instead you should take a copy of the array by using slice.

this.filteredList=this.mainList.slice();

Note - the object references inside the arrays are still the same - so any actions you perform on the inner objects will be reflected in both lists.

const arr1 = [1,2,3];
const arr2 = arr1;

arr2[1] = 4;

console.log('update reference');
console.log(arr1, arr2);

const arr3 = arr1.slice();
arr3[1] = 2;

console.log('update slice');
console.log(arr1, arr3);

EDIT

While this is one part of your issue, you are still copying your main array reference in other parts of your code.

I would recommend starting again with a different approach. Here's my very simplified version, albeit without "Select All" functionality: https://stackblitz.com/edit/angular-ihkbfn

You can either use slice

array.slice(0, 3);

if you want to modify the original array use,

arr.length = 3;

Demo :

var arr = [1, 2, 3, 4];

var newArr = arr.slice(0,3);

console.log(newArr);