如何以角度显示成功或失败消息？答案

【问题标题】：How to show success or failure message in angular?如何以角度显示成功或失败消息？
【发布时间】：2022-01-31 17:31:00
【问题描述】：

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 消息。那么，我该怎么做，请帮助我。

谢谢

【问题讨论】：

当您将表单数据提交给 api 时，api 会将结果返回为 success 或 failure 。并基于此，您可以分配模板

标签： html angular webapi

【解决方案1】：

您无需重新加载页面。您可以选择导航到另一个组件/页面，或者您可以显示一个弹出对话框，或者您可以呈现广告不同的内容。这是一个非常简单的示例，以呈现不同的内容：

 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，可能更简单

【讨论】：

收到消息时表单消失。我想要休息表格并显示成功消息。
然后从
中删除 *ngIf="!registerSucess"
我删除了它但表单值没有重置我试过ff.reset()
您应该针对这个问题发布一个不同的问题，但一个非常简单（且丑陋）的解决方案将在您的订阅中：this.selectedUser: = {fname:null, age: null, sex: null};

【解决方案2】：

在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!"
    });
  }

【讨论】：

如何重置表单。

【解决方案3】：

在您的代码中：

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

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

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

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

【讨论】：