Угловой 12 — Мат-Диалог не показывает значение из таблицы

#angular #crud #angular12

Вопрос:

Я пытаюсь создать простое приложение CRUD на основе angular 12, используя этот сервис URI — https://api.github.com/repos/angular/angular/issues

У меня есть такая модель:

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

в app.component.html У меня есть столбец компонента таблицы в следующем виде:

     <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>
 

Данные отображаются в таблице просто отлично, как показано ниже:

введите описание изображения здесь

Также есть два компонента диалогового окна (удаление/редактирование).

 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);
  }
}
 

И

 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);
  }
}
 

Проблема:
Данные для ассоциации авторов отсутствуют в обоих приведенных выше диалоговых окнах. Например:

введите описание изображения здесь

Вопрос: Чего мне здесь не хватает? Или что я здесь делаю не так?

При необходимости я могу предоставить более подробную информацию. А также прямой готовый к запуску проект доступен здесь.

Ответ №1:

строка.author_association отсутствует в функции startEdit (). Добавьте строку.author_association в щелчок кнопки, чтобы решить вашу проблему

 <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)">