Модальное всплывающее окно не открывается под углом

Question

У меня есть простая угловая страница, где я показываю список проектов, над которыми работают разработчики. У меня весь сервер написан на ядре .net, а интерфейс на угловом 8. Я могу получить данные из ядра .net и отобразить список проектов. На этой же странице у меня есть «создать новое», чтобы разработчики могли добавлять новые проекты. при нажатии кнопки «Создать новый» я хочу открыть всплывающие окна, чтобы пользователь мог добавлять новые проекты, над которыми он работает. все работает нормально, но когда я нажимаю кнопку Создать новый, ничего не появляется. Не уверен, что я делаю не так. Я пытался отладить файл .ts, но не смог найти ошибку. Весь мой код прямо здесь:

https://stackblitz.com/edit/angular-xsyflg

Ниже приведен код родительского окна (AngularCRUDComponent.ts), из которого я пытаюсь открыть всплывающее окно:

import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
import { ProjectAddComponent } from '../project-add/project-add.component';
import { ProjectDataService } from '../DataService/ProjectDataService';
import { AllItProject } from 'src/Models/allitproject';
import {AcrDivison} from 'src/Models/acrDivison';
import {Appdev} from 'src/Models/appDev';
import {Bsa} from 'src/Models/bsa';
import {ExecutiveSponsor} from 'src/Models/executiveSponsor';
import {ProjectSection} from 'src/Models/projectsection';
import {ProjectStatus} from 'src/Models/projectStatus';
import {ProjectSubType} from 'src/Models/projectSubType';
import {ProjectType} from 'src/Models/projectTypes';
import { Router } from '@angular/router';
import { ProjectUpdateComponent } from '../project-update/project-update.component';
//import { AlertifyService } from '../DataService/alertify.service';
import {
  MatTableModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatCheckboxModule, MatDatepickerModule, MatNativeDateModule,
  MatIconModule, MatAutocompleteModule, MatExpansionModule, MatTabsModule, MatDialogModule, MatTooltipModule, MatRadioModule,
} from '@angular/material';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { Injectable, Inject } from '@angular/core';

@Component({
  selector: 'app-angular-crud',
  templateUrl: './angular-crud.component.html',
  styleUrls: ['./angular-crud.component.css']
})
export class AngularCRUDComponent implements OnInit {


  projectlist: AllItProject[];
  dataavailbale: boolean = false;
  tempproject: AllItProject;

  constructor(private dataservce: ProjectDataService, private route: Router) {

  }
  @ViewChild('projectadd', {static: false}) projectcomponent: ProjectAddComponent;

  ngOnInit() {
    this.LoadProjectData();


  }
LoadProjectData() {

    this.dataservce.getProjectData().subscribe((tempdate) => {
      this.projectlist = tempdate;
      console.log(this.projectlist);
      if (this.projectlist.length > 0) {
        this.dataavailbale = true;

      }

      else {
        this.dataavailbale = false;
      }
     }

    ), err => {
        console.log(err);
      }
  }
loadAddnew() {
this.projectcomponent.objProjectDetails.description = '';
  }

  RefreshData() {
    this.LoadProjectData();
  }


}

Мой файл angularCRUDComponent.html находится ниже

<div class="container">
  <input type="button" class="btn btn-primary" (click)="loadAddnew()" data-toggle="modal" data-target="#myModal" value="Create New">
  <hr>
  <div *ngIf="!dataavailbale">

    <h4> NoData is present Click Add new to add Data.</h4>
  </div>


  <table class="table table-striped table-bordered table-sm" cellspacing="0" width="100%" *ngIf="dataavailbale">
    <thead>
      <tr>
      <th scope="th-sm">Description</th>
       </tr>
    </thead>
    <tbody>
      <tr *ngFor="let project of projectlist let i = index ">
        <td scope="col">{{i+1}}</td>
        <td scope="col">{{ project.description }}</td>
</tr>
    </tbody>
  </table>

</div>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-primary">project Add</h4>
      </div>
      <div class="modal-body">
          <app-project-add #projectadd (nameEvent)="RefreshData($event)"></app-project-add>

      </div>
      <div class="modal-footer">
        <button type="button" #closeBtn class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Код моего дочернего componentproject-add.component.ts находится ниже:

import { Component, OnInit,Input, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AllItProject } from '../../models/allitproject';
import { Router } from '@angular/router';
import {ProjectDataService} from '../DataService/ProjectDataService';

@Component({
  selector: 'app-project-add',
  templateUrl: './project-add.component.html',
  styleUrls: ['./project-add.component.css']
})
export class ProjectAddComponent implements OnInit {

  @Input()  cleardata: boolean = false;
  @Output() nameEvent = new EventEmitter<string>();
  objtempproject: AllItProject;
  @Input() objProjectDetails: AllItProject = new AllItProject();
  @ViewChild('closeBtn', {static: true}) cb: ElementRef;

 constructor(private dataservice: ProjectDataService, private route: Router) {

 }

  ngOnInit() {

  }

  ResetValues(){

  }

Register(regForm: NgForm){

    this.objtempproject = new AllItProject();
    this.objtempproject.name = regForm.value.name;
    this.objtempproject.description = regForm.value.description;

    this.dataservice.AddProjectDetails(this.objtempproject).subscribe(res=> {
      console.log('Project Added successfully');
       this.TakeHome();
}
  );


  }
  TakeHome(){
    this.nameEvent.emit('ccc');
    this.cb.nativeElement.click();
    this.route.navigateByUrl('');
  }

}

Мой дочерний компонент project-addНиже приведен код .component.html:

<div class="container" style="border:thin">

  <form #projectadd='ngForm' (ngSubmit)="Register(projectadd)" class="form-horizontal" style="width:50%"  >

    <div class="form-group" >
      <label class="control-label col-sm-2" for="description">Description:</label>
      <div class="col-sm-10">
        <input #description="ngModel"  style="width:50%" type="description" [(ngModel)]='objProjectDetails.description' class="form-control" width="50%" id="description" placeholder="Enter description" name="description">

      </div>
    </div>
     <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button  id="btnsubmit"  type="submit" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </form>
</div>
<button style="display:none" type="button" #closeBtn  class="btn btn-default"   data-dismiss="modal">Close</button>

Мой файл app-routing.module.ts находится ниже:

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AngularCRUDComponent } from './angular-crud/ProjectList';
import { ProjectAddComponent} from './project-add/project-add.component';

const routes: Routes = [{path: '', component: AngularCRUDComponent},
{path: 'Add', component: ProjectAddComponent},
{path: 'Home', component: AngularCRUDComponent}
];


@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

, когда я нажимаю F12, я не вижу ошибок,Ниже изображение F12 и моей веб-страницы:

Весь мой код здесь:

https://stackblitz.com/edit/angular-xsyflg

Answer 1

Я вижу MatDialogModule в вашем импорте, так почему бы вам не использовать MatDialog для этой реализации

См. Код ниже для справки.

Parent.Component.ts

import { MatDialog } from '@angular/material/dialog';

constructor(public dialog: MatDialog
) { }


openDialog(): void {
const dialogRef = this.dialog.open(CreateProjectComponent, {
  width: '250px',
   data: {projectname: this.projectname}
});

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');     
});

}

Parent.Component.html

<div>
     <a mat-raised-button (click)="openDialog()">Create New</a>
</div>

CreateProject.Component.ts

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

export interface DialogData {
projectname: string;
}


export class CreateProjectComponent implements OnInit {
 constructor( public dialogRef: MatDialogRef<CreateProjectComponent>,
           @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

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

ngOnInit() {
}
}

CreateProject.Component.html

<h1 mat-dialog-title>Create New Project</h1>
<div mat-dialog-content>
<mat-form-field>
  <input matInput [(ngModel)]="data.projectname" placeholder="Project Name">
</mat-form-field>
</div>
<div mat-dialog-actions>
   <button mat-button [mat-dialog-close]="data.projectname" 
   cdkFocusInitial>Ok</button>
  <button mat-button (click)="onNoClick()">No Thanks</button>
</div>

Answer 2

Что должен делать ваш loadAddNew ()?

loadAddnew() {
    this.projectcomponent.objProjectDetails.description = '';
}

Я бы ожидал увидеть что-то вроде

loadAddnew() {
    // logic to create a new project. 
}