[英]Mat Dialog result ""
Once i input the number and select the add, It will pop-up the dialog and input any animals.一旦我输入数字和 select 添加,它会弹出对话框并输入任何动物。 but once i submit it, i got the result is ""
, but once i push the animals with this code this.data.totalCount it works.但是一旦我提交它,我得到的结果是""
,但是一旦我用这个代码 this.data.totalCount 推动动物,它就会起作用。 can someone help me and tried to fix it.有人可以帮助我并尝试修复它。
import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export interface DialogData {
totalCount: number;
name: string;
}
/**
* @title Dialog Overview
*/
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html',
styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {
animals: string[];
totalCount: number;
busy = false;
constructor(public dialog: MatDialog) { }
openDialog(): void {
this.busy = true;
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: { totalCount: this.totalCount || 1 }
});
dialogRef.afterOpened().subscribe(result => {
this.busy = false;
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animals = result;
console.log(result)
});
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
animals: any[] = [];
getTotalCountVal = null;
start: number = 0;
end: number = 20;
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) { }
ngOnInit() {
this.getTotalCountVal = this.data.totalCount;
if (this.getTotalCountVal) {
for (let i = 0; i < this.data.totalCount; i++) {
this.animals.push('');
}
}
}
onNoClick(): void {
this.dialogRef.close(this.animals);
}
}
https://stackblitz.com/edit/angular-d6nfhr-b2euxy https://stackblitz.com/edit/angular-d6nfhr-b2euxy
the problem is you are storing results in string[], strings are immutable so every time(in for loop) you change it's instance would not be the same as in string[].问题是您将结果存储在 string[] 中,字符串是不可变的,因此每次(在 for 循环中)您更改它的实例都不会与 string[] 中的相同。
Instead create an interface而是创建一个界面
export interface Animal {
name: string;
}
export interface DialogData {
totalCount: number;
name: string;
}
export interface Animal {
name: string;
}
/**
* @title Dialog Overview
*/
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html',
styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {
animals: Animal[];
totalCount: number;
busy = false;
constructor(public dialog: MatDialog) { }
openDialog(): void {
this.busy = true;
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
data: { totalCount: this.totalCount || 1 }
});
dialogRef.afterOpened().subscribe(result => {
this.busy = false;
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
this.animals = result;
console.log(result)
});
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog implements OnInit {
animals: any[] = [];
getTotalCountVal = null;
start: number = 0;
end: number = 20;
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) { }
ngOnInit() {
this.getTotalCountVal = this.data.totalCount;
if (this.getTotalCountVal) {
for (let i = 0; i < this.data.totalCount; i++) {
this.animals.push({name: ''});
}
}
}
loadMore() {
if(this.end < this.getTotalCountVal) {
this.end += 20;
}
}
onNoClick(): void {
this.dialogRef.close(this.animals);
}
}
<h1 mat-dialog-title>Total - {{data.totalCount}}</h1>
<div mat-dialog-content>
<p>Add favorite animals</p>
<ng-container *ngFor="let animal of animals | slice: start: end; let index=index">
<mat-form-field>
<input matInput [(ngModel)]="animal.name" name ="animal">
</mat-form-field>
</ng-container>
<button *ngIf="end < animals.length" mat-raised-button color="primary" (click)="loadMore()">Add more animals</button>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button [mat-dialog-close]="animals" cdkFocusInitial>Ok</button>
</div>
<ol>
<li>
<mat-form-field>
<input matInput [(ngModel)]="totalCount" placeholder="How many animals you want to add?">
</mat-form-field>
</li>
<li>
<button mat-raised-button (click)="openDialog()">Add</button>
<ng-container *ngIf="busy">
Dialog opening...
</ng-container>
</li>
</ol>
<ng-container *ngIf="animals">
<ng-container *ngFor="let animals of animals">
<li>You Added: <i>{{animals.name}}</i></li>
</ng-container>
</ng-container>
Now when you change name of animal its instance would be same animal only name will change.现在,当您更改动物的名称时,它的实例将是相同的动物,只有名称会更改。
Hope this help: Updated stackblitz希望这有帮助:更新的 stackblitz
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.