如何在 Angular 6 和 vmware-clarity 的 UI 中显示错误消息答案

【问题标题】：How can I show error message in the UI in angular 6 and vmware-clarity如何在 Angular 6 和 vmware-clarity 的 UI 中显示错误消息
【发布时间】：2023-04-09 07:12:02
【问题描述】：

您好，我是 Angular 和 Clarity 的新手，如何使用 Angular 6 和 Clarity 在 UI 中显示错误消息、http 错误和其他错误。下面是我的一个组件中的一个小代码 sn-p，您可以在其中看到 (err: any) => console.log(err)，我想使用 Clarity Standard 警报和 App 级别警报在 UI 中显示错误消息，而不是安慰它。请让我知道如何实现这一点。提前致谢。

ngOnInit() {
 this.dataStorageService.getLocations()
  .subscribe(res => {
   for (let i = 0; i < res.Locations.length; i++) {
    const quoteReplaceData = res.Locations[i].replace(/'/g, '"');
     this.locationList.push(JSON.parse(quoteReplaceData));
   }
  }, (err: any) => console.log(err),
 () => console.log('All done getting incidents'));

【问题讨论】：

标签： angular angular6 vmware-clarity

【解决方案1】：

//In your typescript file, define a variable
error: any;

ngOnInit() {
 this.dataStorageService.getLocations()
  .subscribe(res => {
   for (let i = 0; i < res.Locations.length; i++) {
    const quoteReplaceData = res.Locations[i].replace(/'/g, '"');
     this.locationList.push(JSON.parse(quoteReplaceData));
   }
  }, (err: any) => this.error = err,
 () => console.log('All done getting incidents'));

在你看来：

<div class="alert alert-danger" *ngIf="error">
    <div class="alert-items">
        <div class="alert-item static">
            <div class="alert-icon-wrapper">
                <clr-icon class="alert-icon" shape="exclamation-circle"></clr-icon>
            </div>
            <span class="alert-text">
                {{error}}
            </span>
        </div>
    </div>
</div>

【讨论】：