这是app.component.html

中的文件

<table>
  <tr>
    <td>
      <label>No of Units Used:</label>
    </td>
    <td>
      <input type="number" [(ngModel)]="electricity"> 
    </td>
  </tr>
  <input type="checkbox"/>Home <br>
  <input type="checkbox"/>Commercial <br>
  <input type="button" value="Calculate" (click)="return calculate()">
</table>

现在是我在app.component.ts

中写的逻辑

import { Component } from '@angular/core';
import {ViewChild} from '@angular/core';
import { NgIf } from '@angular/common';

   @Component({
   selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
   })
   export class AppComponent {
    title = 'Electricity Bill Claculation';
    electricity: any;
     msg: any = 'please enter the units';
  calculate()
   {
    let electricity = this.electricity ? parseFloat(this.electricity):0;

   if (electricity!=null  ) {
    alert('hii');
   }else {
   alert ('you entered the value');
   }

   //return  this.electricity;

   }
   }

现在我想使用输入框的值并显示一个警告框，其中逻辑写在.ts文件中的函数中。

我不知道要使用什么指令，我需要在.ts文件中编写逻辑，而不是在输入代码html文件中使用 ngif 。

我尝试了所有我认识的方法，而且有人帮助我解决这个问题。

提前致谢..

Answer 1

如果您使用bootstraps，请查看模态。如果您使用材料，请查看MdDialogRef，如下面的示例

确认-是 - 否 - dialog.component.ts

   @Component({
        selector: 'app-confirmation-dialog',
        templateUrl: './confirmation-yes-no-dialog.component.html'
    })
    export class ConfirmationYesNoDialogComponent implements OnInit {
        public title: string;
        public message: string;
        public btnOkText?: string;
        public btnCancelText?: string;
        constructor(public dialogRef: MdDialogRef<ConfirmationYesNoDialogComponent>) { }
        ngOnInit() {}
    }

confirmation-yes-no-dialog.component.html，您可以使用自己的css设计它

<div fxLayout="column"  fxLayoutGap="2em">
    <div fxLayoutAlign="center center">
        <h3>{{title}}</h3>
    </div>
    <div fxLayout="column"  fxLayoutAlign="stretch center" >
        {{message}}
    </div>
    <div fxLayout="row" fxLayoutAlign="space-around center" >
        <button md-raised-button color="accent" (click)="dialogRef.close(true)">{{btnOkText}}</button>
        <button md-raised-button md-dialog-close (click)="dialogRef.close()">{{btnCancelText}}</button>
    </div>
</div>

确认-是 - 否 - dialog.service.ts

@Injectable()
export class ConfirmationYesNoDialogService {

    constructor(private dialog: MdDialog) { }

    public confirmWithoutContainer(title: string, message: string, btnOkText: string = 'Ok', btnCancelText: string = 'Cancel'): Observable<boolean> {

        let dialogRef: MdDialogRef<ConfirmationYesNoDialogComponent>;
        let config = new MdDialogConfig();
        dialogRef = this.dialog.open(ConfirmationYesNoDialogComponent, config);

        dialogRef.componentInstance.title = title;
        dialogRef.componentInstance.message = message;
        dialogRef.componentInstance.btnOkText = btnOkText;
        dialogRef.componentInstance.btnCancelText = btnCancelText;

        return dialogRef.afterClosed();
    }
}

将其注册为服务

使用它，

constructor(private _confirmationDialog: ConfirmationYesNoDialogService) {
 }
this._toasterService.showSuccess('Site Notification successfully created and updated');
this._toasterService.showError('Error creating Site Notification');

或者你可以使用MdSnackBar作为烤面包机。

通过引用文本框

这是app.component.html

现在是我在app.component.ts

1 个答案: