将值从子组件更新到垫卡中的父组件

Question

I have a angular application and I have two components. ONe where you can update the item. And a other one where the updated value has to be visible directly when the button update is been triggered.

So I made a service like this:

export class ItemListService {
  _updateItemChanged = new Subject<string>();

  constructor() {}

  get refreshNeeded() {
    return this._updateItemChanged.next();
  }
}

and the value where the value is comming from:

[appSubmitIfValid]="editItemForm" (valid)="save()" i18n>Update</button>
        <button *ngIf="!isNew" mat-raised-button color="warn" (click)="openRemoveDialog()" i18n>Remove</button>

 save(): void {
    const form = this.editItemForm;
    const dossierItemDto: DossierItemPostDto = {
      title: form.controls.title.value,
      itemType: form.controls.itemType.value,
      date: (form.controls.date.value as moment.Moment).format('Y-MM-DD'),
      body: form.controls.body.value
    };

    form.disable();

    if (!this.isNew) {

      this.dossierItemService.updateDossierItemById(this.dossier.id, this.item.id, dossierItemDto)

        .subscribe(item => {
          this.item = item;
          this.sortDossierItems();
          form.enable();
          form.markAsPristine();
          this.itemListService._updateItemChanged.next(this.item.title);
          this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
        }, error => this.handleError(error));
    } else {
      this.dossierItemService.newDossierItem(this.dossier.id, dossierItemDto)
        .subscribe(item => {
          this.item = item;
          this.dossierItems.unshift(item);
          this.sortDossierItems();
          this.isNew = false;
          form.enable();
          form.markAsPristine();
          this.errorProcessor.openSuccessSnackBar($localize`Item is saved`);
        }, error => this.handleError(error));
    }
  }

and the component that has to been updated(parent):

  dossierItems: DossierItemDto[] = [];

ngOnInit(): void {
     this.itemlistService._updateItemChanged.subscribe((data) => {
     data =   this.dossierItems.map(a => a.title) ;
    });

But I get now this error:

Type 'string[]' is not assignable to type 'string'.ts(2322)

So what I have to change?

Thank you

oke, and this value has to be updated: the item.title.

<ng-template #itemList let-itemType="itemType">
  <mat-card *ngFor="let item of dossierItemsBy(itemType); let i = index" class="dossier-item-view">
    <mat-card-header>
      <mat-card-title>
        <span [innerHTML]="item.title | highlight: searchQuery"></span>
        <span class="spacer"></span>
        <span><app-attachment-links [attachments]="item.attachments" [dossierId]="dossier.id" ></app-attachment-links></span>
      </mat-card-title>

      <div class="mat-card-header-text">
        <span *ngIf="!createdAtEqualsDate(item)"
          >{{ item.date | date: 'shortDate' }}<ng-template i18n>created</ng-template></span
        >
        <span>{{ item.createdAt | date: 'short' }}</span>
        <span *ngIf="item.createdAt !== item.lastModifiedAt"
          ><ng-template i18n>modified</ng-template> {{ item.lastModifiedAt | date: 'short' }}</span
        >
      </div>
      <span>
        <a mat-icon-button [routerLink]="['../', dossier.id, 'item', item.id]" routerLinkActive="active-link"
        [routerLinkActiveOptions]="{exact:true}"
         i18n-title title="Edit">
          <mat-icon>edit</mat-icon>
        </a>
      </span>
    </mat-card-header>
  </mat-card>
</ng-template>

  dossierItemsBy(itemType: DossierItemTypeDto) {
    return this.dossierItems.filter(
      i => i.itemType === itemType && (!this.hasSearchQuery || this.itemSearchMatches[i.id].hasMatch)
    );
  }

Answer 1

You wrote that in subject pass string

_updateItemChanged = new Subject<string>();

And in subscribe you try to assign an array of strings to it

this.itemlistService._updateItemChanged.subscribe((data) => {
 data =   this.dossierItems.map(a => a.title) ;
});

If you want to update your parent , why not use Output ?