避免回调地狱的一种解决方法是使用RxJS的管道操作符和异步/等待语法。下面是一个使用Angular 6的代码示例：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map, switchMap, catchError } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: `
    

      

        

          {{ item.name }}
        
      
    
  `
})
export class ExampleComponent implements OnInit {
  data$: Observable;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.data$ = this.http.get('https://api.example.com/data')
      .pipe(
        switchMap((response: any) => {
          // 处理第一个异步操作的结果
          return this.http.get(response.url);
        }),
        map((response: any) => {
          // 处理第二个异步操作的结果
          return response.data;
        }),
        catchError((error: any) => {
          // 处理错误
          console.error(error);
          return Observable.of([]);
        })
      );
  }
}

在上述示例中，我们使用switchMap操作符将第一个HTTP请求的结果映射为第二个HTTP请求。然后，我们使用map操作符将第二个HTTP请求的结果映射为我们要显示在模板中的数据。如果任何一个HTTP请求失败，我们可以使用catchError操作符来处理错误并返回一个空数组。

最后，我们通过使用async管道操作符将Observable转换为模板中可以直接使用的数据。这样，我们就可以在模板中使用data$来显示数据，而不需要手动订阅并处理回调。

这是一个简单的示例，但是使用这种方式可以避免回调地狱，并使代码更加清晰和易于维护。