Массив не инициализируется в сервисе Angular 2

258
07 января 2018, 08:11

Доброе время уток,кря-кря. Пытаюсь сделать систему меток на Ангуляре, но вот не задача есть компонент :

 ngOnInit() {
    this.labels = this.labelservice.labels;
}
addLabel() {
    const label = new Label((this.NameLabel));
    this.labelservice.addLabel(label);
    this.NameLabel = '';
}

В нём инициализируется добавление элемента в массив класса метки, есть сервис:

export class LabelService {

constructor() {}
labels:Label[] = [];
addLabel( label:Label) {
    this.labels.push(label);
}
deleteLabel(name:string){
    console.log(this.labels);
    for(let i:number = 0; i<this.labels.length;i++){
        if(name = this.labels[i].name){
            this.labels.slice(i,i+1);
            break;
        }
    }
}

Который добавляет и удаляет данные с массива, но вот не задача, при попытке удаление с компонента, который является частью массива, т.е. сама метка:

 onAction() {
     this.labelService.deleteLabel(this.label.name);
}

Я не могу найти элемент, ибо сам массив в сервисе пуст.

Так вот как мне решить эту проблему и почему собственно :

this.labels.push(label);

добавляет элемент не в массив сервиса, а добавляет его в массив компонента. всем спасибо за внимание

Answer 1

Если кому интересно, решил вопрос по другому- воспользовался EventEmitter: https://metanit.com/вweb/angular2/2.10.php - подробно прочитать. исправил в

deleteLabel(name:string){
    for(let i:number = 0; i<=this.labels.length;i++){
        if(name == this.labels[i].name){
           this.labels.splice(i,i);
            break;
        }
    }
}

slice на splice может кто-то тоже не заметил буковку, и в родительском элементе повесил слушатель :

  <app-label *ngFor="let label of labels" [label]="label" (deleteName)="deleteLabel($event)"></app-label>

а в дочернем добавил в компонент:

 @Output() deleteName: EventEmitter<string>;
onAction() {
    console.log(this.label);
     this.deleteName.emit(this.label.name);
}

а в темплейте :

   <h4  (click)="onAction()">{{label.name}}</h4>

Спасибо за внимание