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

Question

大家好，我是angular和Clarity的新手，如何在使用angular 6和Clarity的UI中显示错误消息、http错误和其他错误。下面是我的一个组件中的一小段代码，你可以在其中看到(err: any) => console.log(err)，我想使用Clarity标准警报和应用程序级别的警报在UI中显示错误消息，而不是安慰它。请提前告诉我如何实现this.Thanks。

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'));

Answer 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>