Typescript - Angular 7的接口问题
Typescript - Angular 7的接口问题
提问于 2019-10-02 21:35:18
我正在为我的API中的一些返回创建接口页面工作正常，但在控制台中显示许多错误“无法读取属性”示例“未定义的”我的错误与javascript不同，因为我在typescript中返回数据，而此错误仅显示为角度插值
我试着做不同的界面，在一些开发人员的帮助下，但错误从未消失。
接口：
export interface Banner {
ds_Imagem: string;
ds_titulo: string;
}banner.component.html
<div id="inicio">
<div class="carousel" style="min-height: 43vh">
<a [style.backgroundImage]="'url('+ banner[0]?.ds_Imagem +')'" class="carousel-item" href="{{banner[0].ds_link}}" style="width: 100vw; min-height: 43vh;
background-repeat: space; background-size: 100% 100%;">
<div class="textoCentral">
<span>{{banner[0]?.ds_titulo}}</span>
</div>
</a>
<a [style.backgroundImage]="'url('+ banner[1].ds_Imagem +')'" class="carousel-item" href="{{banner[1].ds_link}}" style="width: 100vw; min-height: 43vh;
background-repeat: space; background-size: 100% 100%;">
<div class="textoCentral">
<span>{{banner[1]?.ds_titulo}}</span>
</div>
</a>
<a [style.backgroundImage]="'url('+ banner[2].ds_Imagem +')'" class="carousel-item" href="{{banner[2].ds_link}}" style="width: 100vw; min-height: 43vh;
background-repeat: space; background-size: 100% 100%;">
<div class="textoCentral">
<span>{{banner[2]?.ds_titulo}}</span>
</div>
</a>
</div>
</div>错误：
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
}
]横幅服务
@Injectable({
providedIn: 'root'
})
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)
);
}
}banner.component.ts
export class SLIDERComponent implements OnInit {
banner: Banner[] = [];
//banner$: Observable<Banner[]>;
constructor(private service: BannerService) {
}
ngOnInit() {
// this.banner = this.service.list();
this.service.list()
.subscribe(dados => this.banner = dados);
}
}回答 3
Stack Overflow用户
发布于 2019-10-02 21:48:49
我会试着
public banners:Banner[] = undefined;
list():void {
this.http.get<Banner[]>(this.api).subscribe(
(data) => this.banners = data,
(err) => console.log(err)
)
}然后，在html中，您可以执行以下操作
<a *ngIf="banners != undefined">
<span>{{banners[0].ds_titulo}}</span>
</a>您还可以使用返回可观察对象的服务，然后订阅您的组件
Stack Overflow用户
发布于 2019-10-02 22:25:01
如果它出现在运行时，那么它不是接口问题，也不是TypeScript问题，而是您试图访问未定义对象的属性。在访问banner[0].someProperty之前，请确保banner和banner[0]存在：
<ng-container *ngIf="banner?.length">
<a [style.backgroundImage]="'url('+ banner[0].ds_Imagem +')'">
...Stack Overflow用户
发布于 2019-10-02 22:30:17
使用"?“添加模板属性检查在访问您的物业之前：
.link {
width: 100vw;
min-height: 43vh;
background-repeat: space;
background-size: 100% 100%;
}<a [style.backgroundImage]="'url(' + banner[0]?.ds_Imagem +')'"
class="carousel-item link"
href="#">
<div class="textoCentral">
<span>{{banner[0]?.ds_titulo}}</span>
</div>
</a>版本
在从api设置之前，还必须将横幅设置为空数组作为默认值。
banner: Banner[] = [];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58202679
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号