我有一个简单的角度页面,其中显示了开发人员正在从事的项目的列表。我将整个后端用.net核心编写,将前端用angular 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">×</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和我的网页的图像:
我的整个代码在这里:
答案 0 :(得分: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>
答案 1 :(得分:0)
您的loadAddNew()应该做什么?
loadAddnew() {
this.projectcomponent.objProjectDetails.description = '';
}
我本来希望看到
loadAddnew() {
// logic to create a new project.
}