最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angular Material dialog doesn't open - Stack Overflow

programmeradmin9浏览0评论

I have a problem with dialog from angular material, when i press button to open it, it does, but not rly. Dialog does not show up but console prints 'open' and 'close', no errors

Dialog ponent

import {Component, Inject} from '@angular/core';
import {RssFeed} from "../model/rssFeed";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {AppService} from "../service/app.service";

@Component({
  selector: 'app-new-feed-dialog',
  templateUrl: './new-feed-dialogponent.html',
  styleUrls: ['./new-feed-dialogponent.css']
})
export class NewFeedDialogComponent {

  rssFeed: RssFeed = new RssFeed();

  constructor(private service: AppService,
 public dialogRef: MatDialogRef<NewFeedDialogComponent>,
 @Inject(MAT_DIALOG_DATA) public data: any) {
  }

  onSaveClick(): void {
    this.service.saveRssFeed(this.rssFeed)
    this.dialogRef.close(this.rssFeed);
  }

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

}

html

<h2 mat-dialog-title>
  <mat-icon>library_add</mat-icon>
  New Feed
</h2>
<mat-dialog-content>
  <form>
    <mat-form-field class="full-width">
      <input matInput placeholder="Feed Name" name="name" [(ngModel)]="rssFeed.name">
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Feed Url" name="url" [(ngModel)]="rssFeed.url">
    </mat-form-field>
  </form>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button (click)="onCancelClick()">Cancel</button>
  <button mat-button (click)="onSaveClick()">Save</button>
</mat-dialog-actions>

I'm opening it from another ponent

onAddRssFeedClick(): void{
    let dialogRef = this.dialog.open(NewFeedDialogComponent)
    dialogRef.afterOpen().subscribe( ()=> {
      console.log('open')
    })
    dialogRef.afterClosed().subscribe(() => {
      console.log('close')
    });
  }

I have a problem with dialog from angular material, when i press button to open it, it does, but not rly. Dialog does not show up but console prints 'open' and 'close', no errors

Dialog ponent

import {Component, Inject} from '@angular/core';
import {RssFeed} from "../model/rssFeed";
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material";
import {AppService} from "../service/app.service";

@Component({
  selector: 'app-new-feed-dialog',
  templateUrl: './new-feed-dialog.ponent.html',
  styleUrls: ['./new-feed-dialog.ponent.css']
})
export class NewFeedDialogComponent {

  rssFeed: RssFeed = new RssFeed();

  constructor(private service: AppService,
 public dialogRef: MatDialogRef<NewFeedDialogComponent>,
 @Inject(MAT_DIALOG_DATA) public data: any) {
  }

  onSaveClick(): void {
    this.service.saveRssFeed(this.rssFeed)
    this.dialogRef.close(this.rssFeed);
  }

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

}

html

<h2 mat-dialog-title>
  <mat-icon>library_add</mat-icon>
  New Feed
</h2>
<mat-dialog-content>
  <form>
    <mat-form-field class="full-width">
      <input matInput placeholder="Feed Name" name="name" [(ngModel)]="rssFeed.name">
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Feed Url" name="url" [(ngModel)]="rssFeed.url">
    </mat-form-field>
  </form>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button (click)="onCancelClick()">Cancel</button>
  <button mat-button (click)="onSaveClick()">Save</button>
</mat-dialog-actions>

I'm opening it from another ponent

onAddRssFeedClick(): void{
    let dialogRef = this.dialog.open(NewFeedDialogComponent)
    dialogRef.afterOpen().subscribe( ()=> {
      console.log('open')
    })
    dialogRef.afterClosed().subscribe(() => {
      console.log('close')
    });
  }
Share Improve this question edited Aug 15, 2021 at 22:58 Guerric P 31.8k6 gold badges58 silver badges105 bronze badges asked Jun 6, 2018 at 13:37 KamilKamil 331 silver badge6 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 10

In your app.ponent.html, there is the button that triggers your modal <a class="nav-link" (click)="onAddRssFeedClick()" href="#">Add Feed</a>

Remove the href="#" and you're good!

发布评论

评论列表(0)

  1. 暂无评论