Я получаю Невозможно прочитать свойство 'appendChild' со значением null (в chrome), и this.container имеет значение null (в firefox), когда я начал использовать диалог материалов - PullRequest
Новая
       17

Я получаю Невозможно прочитать свойство 'appendChild' со значением null (в chrome), и this.container имеет значение null (в firefox), когда я начал использовать диалог материалов

0 голосов
/ 26 мая 2019

В моем веб-интерфейсе есть таблица, в которой есть список всех моих пользователей из базы данных MySQL с использованием Spring API. Я хотел создать диалоговое окно материалов, которое открывалось бы при нажатии на пользователя, но по какой-то причине я получаю кучу ошибок в Firefox и Chrome, которые упоминались выше, и я не нашел в Интернете ничего, что могло бы помочь, хотя я следил за многими учебники для создания углового диалога, но я все еще получил те же ошибки.

Вот мой компонент HTML, который имеет список пользователей: 

<div class="container-scroller">
<app-navbar></app-navbar>
<div class="container-fluid page-body-wrapper">
<app-sidebar></app-sidebar>
<div class="main-panel">
  <div class="content-wrapper">
    <div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
  <div class="card-body">
    <h4 class="card-title" style="font-weight: 600">Users List</h4>
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Id</th>
            <th>Profile Picture</th>
            <th>Username</th>
            <th>Last Name</th>
            <th>First Name</th>
            <th>Email</th>
            <th>Enabled</th>
            <th>Registered Date</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let u of users" (click)="openDialog()" id="myId">
            <td>{{u.id}}</td>
            <td>{{u.profilePicture}}</td>
            <td>{{u.username}}</td>
            <td>{{u.lastName}}</td>
            <td>{{u.firstName}}</td>
            <td>{{u.email}}</td>
            <ng-container *ngIf="u.enabled; else elseTemplate">
              <td class="text-success">{{u.enabled}}</td>
            </ng-container>
            <ng-template #elseTemplate>
              <td class="text-danger">{{u.enabled}}</td>
            </ng-template>
            <td>{{ u.registeredDate | date: shortDate }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>
</div>
  </div>
</div>
</div>
</div>

.ts файл: 

import { Component, OnInit } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserService } from '../user.service';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { NewDialogComponent } from '../new-dialog/new-dialog.component';

@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['../app.component.scss', './dashboard.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class DashboardComponent implements OnInit {
loginuser: any = {};
users: any[] = [];
constructor(private service: UserService, private dialog: MatDialog) {
this.loginuser = JSON.parse(localStorage.getItem('currentUser'));
this.service.getAllUsers(this.loginuser.token).subscribe(u => {
  this.users = u;
  console.log(this.users);
});
}

ngOnInit() {
}

openDialog() {
console.log('selected item: ', selectedItem);
const dialogConfig = new MatDialogConfig();
dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;
dialogConfig.data = {
  id: 1,
  title: 'Angular for Beginners'
};
this.dialog.open(NewDialogComponent, dialogConfig);
const dialogRef = this.dialog.open(NewDialogComponent, dialogConfig);
}
}

и вот новый компонент html диалога: 

<h2 mat-dialog-title>This is a Dialog title</h2>

<mat-dialog-content>

<p> Place content here </p>
</mat-dialog-content>

<mat-dialog-actions>
<button class="mat-raised-button" (click)="close()">Close</button> 
</mat-dialog-actions>

и файл .ts: 

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

@Component({
selector: 'app-new-dialog',
templateUrl: './new-dialog.component.html',
styleUrls: ['./new-dialog.component.scss']
})
export class NewDialogComponent implements OnInit {
description: string;

constructor(private fb: FormBuilder, private dialogRef: MatDialogRef<NewDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
  this.description = data.description;
}

ngOnInit() {}

close() {
this.dialogRef.close();
}
}

1 Ответ

0 голосов
/ 26 мая 2019

На первый взгляд кажется, что вы дважды открываете диалог: 

this.dialog.open(NewDialogComponent, dialogConfig);
const dialogRef = this.dialog.open(NewDialogComponent, dialogConfig);

Не уверен, что именно это и является причиной точной ошибки, но это первое, что я заметил.

Обновление:

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

this.description = data.description;

Я не вижу никакого свойства, установленного для "description" -просто «id» и «title».

...