在方法 angular 2 中找不到服务中的数组

Question

嗨，我在 servcie 中有数组，我在 saveData 数组函数中有一个奇怪的问题是可见的，但在 removeItems 中没有

我的service.ts

export class FormService {
  myArray = []
  constructor(){
  }
  saveData(key, value) {
    this.myArray.push({
      key: key,
      value: value
    });
   //HERE IS VISIBLE and i can add may elements
    console.log('myArray')
    console.log(this.myArray)
  }
  removeItems(myIndex) {
    //here is not visible is empty 
    console.log(this.myArray)
  }

}

更新我的组件

 export class Step3AdditionalServicesComponent implements OnInit {


      constructor(private formService: FormService) {

      }

      ngOnInit() {
        this.stepsGuard.getAccess(false);
      }
      addToMyArray(key,value) {
        this.formService.saveData(key,value)
      }


removeItemFromArray(event) {
    var myIndex = event.target.id;

    console.log('myIndex ' + myIndex);


    this.formService.removeItems(myIndex);
  }
    }

我的html

<button (click)="addToMyArray('key1','simple1')">Add Simle1</button>
<button (click)="addToMyArray('key2','simple2')">Add Simle2</button>
<button (click)="addToMyArray('key3','simple3')">Add Simle3</button>

<button id="1" (click)="removeItemFromArray($event)">Remove 1</button>
<button id="2" (click)="removeItemFromArray($event)">Remove 2</button>
<button id="3" (click)="removeItemFromArray($event)">Remove 3</button>

当我点击 removeItemFromArray($event) 时，我在控制台中看到了索引

----解决方案----
我在组件提供商和 app.module 中声明我的服务 my.component

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css'],
  providers: [FormService] <---delete this and will be working
})

@brijmcq 感谢帮助

Answer 1

以下是我在数组中删除和添加元素的方法：

  elementsArray = []; 

  addElementList(event) {
    let element = event.data;
    if (!this.elementsArray.includes(element)) {
      this.elementsArray.push(element);
      console.log("Elements in array = " + this.elementsArray);
    }
  }

  removeElementList(event) {
    let element = event.data;
    let index = this.elementsArray.indexOf(element, 0);
    if (index > -1) {
      this.elementsArray.splice(index, 1);
      console.log("Elements in array = " + this.elementsArray);
    }
  }

Answer 2

大多数时候，除非您知道自己在做什么，否则在模块级别而不是组件级别声明您的服务。您可能得到了错误的数据，因为如果您在组件级别声明它，您将始终获得 FormService 的新实例，而 myArray = [] 将始终为空。

你可能知道如果你通过索引访问一个空数组接下来会发生什么:)

在方法 angular 2 中找不到服务中的数组

Array in service not found in method angular 2

arrays

angular2-services

angular