Question

我正在尝试重新开发我正在从Angular 1进入Angular 2的项目。目前我正在使用Ionic来构建它，因为它在iOS上使用。这次重新开发是我与TypeScript的第一次互动。

到目前为止，我已经能够完成我需要做的大部分工作。但现在我的问题是我想访问我的类的属性并在HTML代码中显示它，但只有在设置之后，这样我才不会遇到错误。但我的代码或至少Ionic表示，即使我使用ngOnInit或ngAfterContentInit函数尝试执行此操作，该属性仍未定义。

我可能会以错误的方式处理此代码，但我想问一下如何访问这些属性，以便我可以在HTML中将它们显示为*ngFor= 'let e of EventInfo' then {{e.eventName}}。请帮帮我。我将继续搜索以前的问题，希望能找到一些灵感来回答我的问题。

我将在下面添加我的类代码。

要添加更多信息，我计划在切换出的菜单上使用e.eventName，它会显示我想要的信息eventInfo。

对于下面的代码，我还添加了pullJson.getMondayJson的样子。

这是eventInfo在我尝试时最初的样子。 this.eventInfo = [{rType: this.mondayJson.agendaEvents[0].rowType, eventName:this.mondayJson.agendaEvents[0].eventName, startTime:this.mondayJson.agendaEvents[0].startTime, endTime:this.mondayJson.agendaEvents[0].endTime}];

@Component({
  selector: 'center-panel',
  host: {'(window:scroll)': 'track($event)'},
  templateUrl: 'center-panel.html'
})

export class CenterPanel {
  mondayJson;
  tuesdayJson;
  wednesdayJson;

  pages: Array<{title: string}>;
  eventInfo: Array<{eventName: string, startTime: any, endTime: any}>;


  public constructor(public pullJson:PullJson, public menu: MenuController, locationA2:Location) {
    this.pages = [
      { title: 'CenterPanel'},
      { title: 'RightPanel'}
    ];

    pullJson.getMondayJson
      .subscribe(
        getMondayJson => this.mondayJson = {
          dayOfWeek: getMondayJson.dayOfWeek.toUpperCase(),
          agendaEvents: getMondayJson.agendaEvents
        },
        console.error,
        () => console.log('Completed HTTP for Monday!!')
      );
  }

this.getMondayJson = this.http.get('https://../remote-server-file.json')
      .map(response => response.json());

有人让我发布模板代码：

  <div id="{{ 'MONDAY-events-' + event.startTime }}" menuToggle class="agenda-event-container" *ngFor="let event of mondayJson.agendaEvents" (click)="event.itemClicked = !event.itemClicked">
    <div class="agenda-event-row {{event.rowType}}">
      <div class="time-container">
        <div class="event-left-border-{{event.iconType}}">
          <div class="start-time">
            {{event.startTime}}
          </div>
          <div id="MONDAY-events-endTime" class="end-time">
            {{event.endTime}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

以下是Json文件的示例：

{
      "rowType": "event",
      "eventName": "Facilitator Training",
      "iconType": "workshop",
      "startTime": "8:00AM",
      "endTime": "10:00AM",
      "headerLocation": "Go To Brooklyn",
      "locationDetails": {
        "jsonGroupFile": {
          "subData": "",
        },
        "hardcodedList": ["<b>Test:<br>New York"]
      },
      "subEvents": [
        {
          "presentationName": "",
          "durationInMinutes": "120",
          "speakers": "Test Person"
        }
      ],
      "images": [
        {
          "imageType": "hotel"
        },
        {
          "imageType": "map"
        }
      ],
      "files": []
    }

尝试访问我的TypeScript类属性，以便我可以用HTML显示

0 个答案: