angular - Angular2 @Input() 数组未设置
问题描述
尝试将数组传递给 @Input() 参数,但它根本不显示。
<ng-container *ngIf = "searchResults != undefined">
<searchresult *ngFor = "let result of searchResults;"
[title] = 'result.title'
[authorName] = 'result.authorName'
[content] = 'result.content'
[tagList] = "result.tagList"
></searchresult>
</ng-container>
<p *ngIf = "searchResults == undefined">loading...</p>
然后在搜索结果中我有
<div class = "search-result">
<div class = 'result-top-section'>
<div class = 'author-profile'>
<img width = '70' height = '70' class = 'profile-icon' src= '/images/ogpfp.png'/>
<p>{{ authorName }}</p>
</div>
<div class = 'content'>
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</div>
<div class = 'result-tag-row'>
<tag *ngFor = "let tag of tagList;" [tagName] = 'tag'></tag>
</div>
这是 SearchResultComponent 类
@Component({
selector: 'searchresult',
templateUrl: './searchResult.component.html',
styleUrls: ['./searchResult.component.css']
})
export class SearchResultComponent implements ISearchResult{
@Input()
title: string;
@Input()
authorName: string;
@Input()
content: string;
@Input()
tagList: string[];
}
https://snag.gy/Nt4JIo.jpg 这是数组,所以你可以看到标签列表被填充
https://snag.gy/SIX0Gs.jpg 这是 html 输出的内容,您可以看到除了标签列表之外的每个输入属性都已设置
我可能在这里遗漏了一些东西,如果有什么让我知道。提前致谢。
解决方案
如评论中所述,您在将标签列表绑定到组件的输入时打错了字(result.tagList
而不是) 。result.tags
tagsList
searchresult
要解决此问题,您必须将绑定更改为[tagList] = "result.tags"
.
推荐阅读
- laravel - SSL enabled but laravel application not working in AWS
- google-bigquery - Function size limit 32K
- angular - Angular - How to grab query params from redirect url
- flutter - Flutter Controller's length property error
- javascript - If search contains "pc" search another site
- python - Python: Creating a pandas data frame out of a dictionary
- python - 我正在尝试规范化数据框中的文档列
- python - MINLPs 的 Couenne 求解器提供最优解状态,但结果远未达到预期最优
- javascript - 如何检索渲染的填充值
- javascript - const err = new MongooseError(message);