Что я делаю не так?

Question

[Сева]

Привет,

простецкая задача - нужно добавить строку в грид. По нажатию на кнопку вызывается диалог, в котором - компонент добавления. Потом пушим наши данные в массив trustlets и проверяем, запушилось ли - окей, в консоль выводится массив из трех элементов. Кидаем событие в родительский компонент, тянем из него наши trustlets - там снова два элемента.

Что не так? Спасибо.

AddTrustletComponent (диалог добавления)

import { Component, OnInit, Inject, EventEmitter, Output } from '@angular/core';
import { TrustletServiceService } from '../../../service/trustlet/trustlet-service.service';
import { Trustlet } from '../../../model/common.model';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
  selector: 'addTrustlet',
  templateUrl: 'add-trustlet.component.html',
  providers: [TrustletServiceService]
})

export class AddTrustletComponent implements OnInit {

  public name:string;
  public repo:string;

  private trustlet:Trustlet;
  
  @Output() add = new EventEmitter<Trustlet>();

  constructor(private trustletService: TrustletServiceService,
  	public dialogRef: MatDialogRef<AddTrustletComponent>,
   	@Inject(MAT_DIALOG_DATA) public data: any) {
      this.trustlet = new Trustlet();
    }

	onNoClick(): void {
		this.dialogRef.close();
	}

  addTrustlet() {
    this.trustlet = {
      name: this.name,
      repo: this.repo,
    }
    this.trustletService.addTrustlet(this.trustlet);
    this.add.emit(this.trustlet);
  }

  ngOnInit() {

  }

}

TrustletServiceService

import { Injectable } from '@angular/core';
import { Trustlet } from '../../model/common.model';
@Injectable()

export class TrustletServiceService {

  public trustlets:Array<Trustlet> = [                   // mock !!
    { name: 'Trustlet1', repo: 'Repository1' },
    { name: 'Trustlet2', repo: 'Repository2' }
  ];

  constructor() { 

  }

  getTrustlets():Array<Trustlet> {
    return this.trustlets;
  }

  addTrustlet(trustlet:Trustlet) {
    this.trustlets.push(trustlet);
    console.log(this.getTrustlets())    // три объекта в массиве
  }
}

Дашборд

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { TrustletServiceService } from '../service/trustlet/trustlet-service.service';
import { CognitoService } from '../service/cognito/cognito.service';
import { AddTrustletComponent } from './dialogs/add-trustlet/add-trustlet.component';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Trustlet } from '../model/common.model';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
})

export class DashboardComponent implements OnInit {

  displayedColumns = ['name', 'repo'];

  public dataSource:MatTableDataSource<Trustlet>;

  constructor(private cognitoService:CognitoService, private trustletService: TrustletServiceService, public dialog: MatDialog) {
    this.dataSource = new MatTableDataSource(trustletService.getTrustlets());
  }

  openDialog(): void {
    let dialogRef = this.dialog.open(AddTrustletComponent);
    const sub = dialogRef.componentInstance.add.subscribe(trustlet => {
      console.log(this.trustletService.getTrustlets());  // два!! два объекта в массиве, какого черта?
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log(result);
    });
  }

  ngOnInit() {

  }

}

Comments

[Ivan Stroykin]

Соберите тут - ссылка. Посмотрим

Answer 1

[Евгений]

Так храните где-нибудь состояние... Local Storage, например.

Вы же делаете инъекцию сервиса Trustlet в два компонента. Каждый раз создается отдельный инстанс сервиса, где тот самый список инициализируется двумя элементами:

public trustlets:Array<Trustlet> = [                   // mock !!
    { name: 'Trustlet1', repo: 'Repository1' },
    { name: 'Trustlet2', repo: 'Repository2' }
  ];

Через первый инстанс вы запушили элемент, окей. А другой, через который получаете список, опять создался с двумя по-умолчанию.

Comments

[Ivan Stroykin]

Тогда уж через rxjs подписаться и всё. Зачем LocalStorage этим засорять

[Евгений]

Иван Стройкин, может быть и не нужно засорять :) я самый простой пример привел.

[Ivan Stroykin]

Евгений, Тогда ладно :)

[Сева]

Я почему-то думал, что это синглтон, как в первом Angular. Спасибо.

[Coder321]

Сева, Синглтоном он будет есл вы добавите его в провайдеры модуля, а не компонента