打字稿的接口问题-Angular 7

Question

我正在为API中的某些返回创建接口该页面工作正常，但在控制台中显示许多错误“无法读取未定义的属性“示例””

我尝试在一些开发人员的帮助下制作不同的界面但是错误永远不会消失

接口：

export interface Banner {
  ds_Imagem: string;
  ds_titulo: string;
}

HTML：

    <a [style.backgroundImage]="'url('+ banner[0].ds_Imagem +')'" class="carousel-item" href="#" style="width: 100vw; min-height: 43vh;
      background-repeat: space; background-size: 100% 100%;">
      <div class="textoCentral">
        <span>{{banner[0].ds_titulo}}</span>
      </div>
    </a>

错误：

ERROR TypeError: Cannot read property '0' of undefined
    at Object.eval [as updateRenderer] (SLIDERComponent.html:6)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:23937)
    at checkAndUpdateView (core.js:23312)
    at callViewAction (core.js:23548)
    at execComponentViewsAction (core.js:23490)
    at checkAndUpdateView (core.js:23313)
    at callViewAction (core.js:23548)
    at execComponentViewsAction (core.js:23490)
    at checkAndUpdateView (core.js:23313)
    at callWithDebugContext (core.js:24177)

API中的对象

[
{
ds_Imagem: "http://gtw4.ska.com.br/desk_target_magnus/Files/bannertarget-06.png",
ds_titulo: null
},
{
ds_Imagem: "http://gtw4.ska.com.br/desk_target_magnus/Files/Unimed-Banner.png",
ds_titulo: null
},
{
ds_Imagem: "http://gtw4.ska.com.br/desk_target_magnus/Files/setembro-amarelo_2019092603245511.png",
ds_titulo: null
}
]

横幅服务

export class BannerService {

  private readonly api = 'http://gtw4.ska.com.br:5007/Banner';

  constructor(private http: HttpClient) {
  }

  list() {
    return this.http.get<Banner[]>(this.api)
      .pipe(
        tap(console.log)
      );
  }
}

Answer 1

我会尝试

public banners:Banner[] = undefined;

list():void {
    this.http.get<Banner[]>(this.api).subscribe(
      (data) => this.banners = data
    )
}