Angular 12 - Mat-Dialog does not show the value from table

Question

I am trying to create a simple angular 12 based CRUD application using this service URI - https://api.github.com/repos/angular/angular/issues

I have a model like this:

export class Issue {
  id: number;
  title: string;
  state: string;
  url: string;
  created_at: string;
  updated_at: string;
  author_association: string;
}

in app.component.html I have my table component column as this:

    <ng-container matColumnDef="author_association">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Author Association</mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.author_association}}</mat-cell>
    </ng-container>

The data shows up in table just fine like below:

Also there are two dialog components (delete/edit).

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import {Component, Inject} from '@angular/core';
import {DataService} from '../../services/data.service';


@Component({
  selector: 'app-delete.dialog',
  templateUrl: '../../dialogs/delete/delete.dialog.html',
  styleUrls: ['../../dialogs/delete/delete.dialog.css']
})
export class DeleteDialogComponent {

  constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any, public dataService: DataService) { }

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

  confirmDelete(): void {
    this.dataService.deleteIssue(this.data.id);
  }
}

And

import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import {Component, Inject} from '@angular/core';
import {DataService} from '../../services/data.service';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-baza.dialog',
  templateUrl: '../../dialogs/edit/edit.dialog.html',
  styleUrls: ['../../dialogs/edit/edit.dialog.css']
})
export class EditDialogComponent {

  constructor(public dialogRef: MatDialogRef<EditDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any, public dataService: DataService) { }

  formControl = new FormControl('', [
    Validators.required
    // Validators.email,
  ]);

  getErrorMessage() {
    return this.formControl.hasError('required') ? 'Required field' :
      this.formControl.hasError('email') ? 'Not a valid email' :
        '';
  }

  submit() {
    // emppty stuff
  }

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

  stopEdit(): void {
    this.dataService.updateIssue(this.data);
  }
}

Problem: The data for Author Association is missing in both above dialogs. For example:

Question: What I am missing here? Or what I am doing wrong here?

I can provide more details if needed. And also the direct ready-to-run project is available here.

Answer 1

row.author_association is missing inside the startEdit() function. Add row.author_association in the button click should fix your issue

<button mat-icon-button color="accent" (click)="startEdit(i, row.id, row.title, row.state, row.url, row.created_at, row.updated_at, row.author_association)">