typescript - TypeScript 中 forEach 循环的问题
问题描述
我的 TypeScript 代码有问题,我的 forEach 循环在页面上显示未定义。下面提供的是我的代码 for is my forEach 语句:
private _renderList(items: ISPList[]): void {
let html: string = '<div class="ms-Grid"><div class="ms-Grid-row">';
items.forEach((item: ISPList) => {
html += `
<div class="ms-Grid-col ms-u-sm4 ms-u-md4 ms-u-lg4">
<h2>${item.DisplayListTitle}</h2>
<div>${item.ListItems.length}</div>
<div>${item.ListItems.forEach((listItem: ListObject,index) => {
})}</div>
</div>`;
});
html +="</div></div>";
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}
数据正在通过我的 _getMockListData 方法填充(见下文):
private _getMockListData(): Promise<ISPLists> {
return MockHttpClient.get()
.then((data: ISPList[]) => {
var listData: ISPLists = { value: data };
return listData;
}) as Promise<ISPLists>;
}
MockHttpClient 对象定义如下:
export default class MockHttpClient {
//Add some mock data to this for testing.
private static _createListItems: ListObject[] = [
{Title:'Doc1', FileType:'docx',ItemUrl:'http://www.espn.com', ItemType:'Document Library'},
{Title:'Doc2', FileType:'docx',ItemUrl:'http://www.espn.com', ItemType:'Document Library'}];
public static _applyListItems: ListObject[] = [
{Title:'ListItem 1', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'},
{Title:'ListItem 2', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'}];
public static _deployListItems: ListObject[] = [
{Title:'ListItem 2', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'},
{Title:'ListItem 3', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'}];
public static _supportListItems: ListObject[] = [
{Title:'ListItem 5 ', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'},
{Title:'ListItem 6', FileType:'ListItem',ItemUrl:'http://www.espn.com', ItemType:'List'}];
private static _items: ISPList[] = [
{ Title: 'Mock List', Id: '1', ListType:"List", DisplayListTitle:'CREATE', RowCount: 4, SortOrder:1, ShowOnHomePage:true,ListItems:MockHttpClient._createListItems},
{ Title: 'Mock List 2', Id: '2', ListType:"Library", DisplayListTitle:'APPLY', RowCount: 4, SortOrder:2, ShowOnHomePage:true,ListItems:MockHttpClient._applyListItems },
{ Title: 'Mock List 3', Id: '3', ListType:"List", DisplayListTitle:'DEPLOY',RowCount: 4, SortOrder:3, ShowOnHomePage:true,ListItems:MockHttpClient._deployListItems },
{ Title: 'Mock List 4', Id: '4', ListType:"Library", DisplayListTitle:'SUPPORT', RowCount: 4, SortOrder:4, ShowOnHomePage:true,ListItems:MockHttpClient._supportListItems }];
public static get(): Promise<ISPList[]> {
return new Promise<ISPList[]>((resolve) => {
resolve(MockHttpClient._items);
});
}
}
下面提供了 ISPList 和 ListObject 的定义:
export interface ISPLists { value: ISPList[]; }
export interface ISPList {
Title: string;
Id: string;
DisplayListTitle: string;
RowCount: number;
SortOrder: number;
ShowOnHomePage: boolean;
ListType: string;
ListItems: Array<ListObject>;
}
export interface ListObject {
Title: string;
ItemUrl: string;
ItemType: string;
FileType: string;
}
我可以显示 item.ListItems.length 属性,它表明我有 2 个元素,另外我可以运行 item.ListItems[0].Title 来显示实际的标题值。感觉就像我需要一个 for 循环而不是一个 forEach 循环。
请帮忙。
解决方案
该行: -
item.ListItems.forEach((listItem: ListObject,index) => {
}
不做任何事情并返回未定义。因此,您需要创建一个返回字符串的函数。forEach 将始终返回未定义。
你可以使用地图。这将返回一个数组,在这种情况下是字符串,可以连接在一起形成一个字符串。
item.ListItems.map((listItem: ListObject,index) => `<a href="${
listItem.ItemUrl}">${listItem.Title}</a>`).join('\n')
推荐阅读
- kivy - 我正在尝试将微调器的值保存到文件中,但出现此错误:AttributeError: 'NoneType' object has no attribute 'text'
- flutter - Flutter 中 Card 小部件的高度不一致,ListTile 为子级
- sql - SQL - 如何使用来自同一个表的多个查询执行嵌套 SELECT?
- google-cloud-platform - GCP 日志记录中的 ChromeOS 错误
- python - 我无法根据一对一字段引用另一个模型中的字段进行过滤
- android - 如何在屏幕旋转时保持 recyclerView 的滚动位置
- typescript - TypeScript 中的 `{}` 类型和 `object` 类型有什么区别?
- mysql - 如何解决问题:zone.js:3243 POST http://localhost:4200/login 404(未找到)
- java - StaxEventItemReader 中的 ClassCastException
- powershell - 将数字转换为货币