如何在 angular 中显示成功或失败消息？

Question

user.component.html

<form #ff="ngForm">
    <input type="text" name="fname" placeholder="User Name" [(ngModel)] = "selectedUser.fname"/><br/><br/>
    <input type="number" name="age" placeholder="age" [(ngModel)] = "selectedUser.age"/><br/><br/>
    <input type="radio" name="sex" value="male" [(ngModel)] = "selectedUser.sex"/> Male<br/><br/>
    <input type="radio" name="sex" value="female" [(ngModel)] = "selectedUser.sex"/> Female<br/><br/>
    <input type="button" name="submit" value="submit" (click)="createUserData(ff.value)">
</form>

user.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../service/user.service';

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

  constructor(private us:UserService) { }

  user:  any;
  selectedUser:  any  = {fname:null, age:  null, sex: null};

  ngOnInit(): void {
  }

  createUserData(ff){
    this.us.createform(ff).subscribe((user:any)=>{
      console.log("Success register");
    });
  }
}

我是 angular 的新手，我正在尝试使用 web API 向 mysqli 插入数据库中的表单数据，它工作正常。现在，我想在 user.component.html 页面中显示成功或失败消息。我希望当我点击提交按钮时页面重新加载并显示 success or failure 消息。那么，我该怎么做，请帮助我。

谢谢

Answer 1

在user.component.ts中创建一个字符串变量来保存消息

export class UserComponent implements OnInit {
    message = '';
...

向 html 添加一个元素来包含消息，我将使用 <p>。双花括号 {{ }} 允许您从组件中插入变量。

<p>{{message}}</p>

现在只需更新组件中的消息即可更新 html

  createUserData(ff){
    this.message = "Creating User Data..."
    this.us.createform(ff).subscribe((user:any)=>{
      this.message = "Success!"
    });
  }

Answer 2

您不需要重新加载页面。您可以选择导航到另一个 component/page，也可以显示弹出对话框或呈现不同的内容。这里有一个非常简单的例子来呈现不同的内容：

 registerSucess:boolean = false;

 createUserData(ff){
    this.us.createform(ff).subscribe((user:any)=>{
      console.log("Success register");
      this.registerSucess=true;
    });
  }

并在模板中：

<form #ff="ngForm" *ngIf="!registerSucess">
    <input type="text" name="fname" placeholder="User Name" [(ngModel)] = "selectedUser.fname"/><br/><br/>
    <input type="number" name="age" placeholder="age" [(ngModel)] = "selectedUser.age"/><br/><br/>
    <input type="radio" name="sex" value="male" [(ngModel)] = "selectedUser.sex"/> Male<br/><br/>
    <input type="radio" name="sex" value="female" [(ngModel)] = "selectedUser.sex"/> Female<br/><br/>
    <input type="button" name="submit" value="submit" (click)="createUserData(ff.value)">
</form>

<h1 *ngIf="registerSucess"> Register Success :D </h1>

或者您可以使用变量 user 而不是 registerSuccess，可能会更简单

Answer 3

在您的代码中：

this.us.createform(ff).subscribe((user:any) => {
   console.log("Success Register")
});

每次通过 'createform' 函数接收到响应时，都会执行 'subscribe' delta 函数中的代码。所以在这里你可以输入某种机制来触发你的弹出窗口。

您需要显示一个弹出窗口 window，这取决于您使用的 UI 组件类型。弹出窗口可以写在您的 html 中，并且仅通过您在订阅增量函数中激活的标志显示，然后在按下或关闭弹出窗口时禁用。

我建议对 UI 个组件使用类似 bootstrap 的东西。

如何在 angular 中显示成功或失败消息？

How to show success or failure message in angular?

html

angular

webapi