>

혼란이 있다면 죄송합니다. 이것은 첫 번째 이온 프로젝트입니다. 그래서 데이터 배열이 있습니다 (행 위의 내용은 홈페이지이고 아래는 첫 번째 하위 페이지입니다)

this.cities = [
        {
          name: 'Miami',
          shortName: 'Mi',
          events: '12',
          news: '15',
          weather: '29',
          crimeAlert: 'n',
          crimeAlertTitle: '',
          crimeAlertBody: '',
          newsItems: [{
            name: 'someNewsItem 1',
            imaged: 'y',
            image: 'im here',
            body: 'Miami someBody 1'
          },{
            name: 'someNewsItem 2',
            imaged: 'y',
            image: 'im here',
            body: 'Miami someBody 2'
          }],
          eventItems: [{
            name: 'someEventItem 1',
            imaged: 'y',
            image: 'im here',
            body: 'Miami someBodyEvent 1'
          }]
        }, ...
       ];
       
       
       goToCityPage(c) {
    this.navCtrl.push(CityViewPage, {
      'name': c.name,
      'shortName': c.shortName,
      'events': c.events,
      'news': c.news,
      'weather': c.weather,
      'crimeAlert': c.crimeAlert,
      'crimeAlertTitle': c.crimeAlertTitle,
      'crimeAlertBody': c.crimeAlertBody,
      'newsItems': c.newsItems,
      'newsItemsName': c.newsItems.name,
      'newsItemsBody': c.newsItems.body,
      'newsItemsImaged': c.newsItems.imaged,
      'newsItemsImage': c.newsItems.image,
      'eventItems': c.eventItems,
      'eventItemsName': c.eventItems.name,
      'eventItemsBody': c.eventItems.body,
      'eventItemsImage': c.eventItems.image,
      'eventItemsImaged': c.eventItems.imaged
    });
  }
        
        ______________________________________________________
        
        constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.city = this.navParams.get('name');
    this.cityShort = this.navParams.get('shortName');
    this.events = this.navParams.get('events');
    this.news = this.navParams.get('news');
    this.weather = this.navParams.get('weather');
    this.crimeAlert =  this.navParams.get('crimeAlert');
    this.crimeAlertTitle =  this.navParams.get('crimeAlertTitle');
    this.crimeAlertBody =  this.navParams.get('crimeAlertBody');
    this.newsItemsName =  this.navParams.get('newsItemsName');
    this.newsItemsBody =  this.navParams.get('newsItemsBody');
    this.newsItemsImaged =  this.navParams.get('newsItemsImaged');
    this.newsItemsImage =  this.navParams.get('newsItemsImage');
    this.eventItemsName =  this.navParams.get('eventItemsName');
    this.eventItemsBody =  this.navParams.get('eventItemsBody');
    this.eventItemsImaged =  this.navParams.get('eventItemsImaged');
    this.eventItemsImage =  this.navParams.get('eventItemsImage');
    this.newsEvents = [
      {
        pageTitle: 'Recent News',
        name: this.city,
        itemName: this.newsItemsName,
        imaged: this.newsItemsImaged,
        image: this.newsItemsImage,
        body: this.newsItemsBody
      },
      {
        pageTitle: 'New Events',
        name: this.city,
        itemName: this.eventItemsName,
        imaged: this.eventItemsImaged,
        image: this.eventItemsImage,
        body: this.eventItemsBody
      }
    ]
  }

같은 배열이 더 있습니다. 내부 배열과 관련이없는 데이터를 가져옵니다. 그러나 "하위 배열"(예 : newsItems 및 eventItems)에서 데이터를 가져 오는 데 문제가 있습니다.

프로젝트의 아래쪽은 도시의 이름 만 블록으로 표시하는 홈 페이지입니다 (예 : 배열의 이름 부분). ->탭하면 해당 도시와 도시에 대한 정보가있는 하위 페이지로 이동합니다 (예 : shortName, 이벤트 수, 뉴스 수, 날씨, crimeAlert (<-n 인 경우 표시되지 않음) dom), crimeAlertTitle, crimeAlertBody). 해당 서브 페이지 하단에는 "Recent News"와 "New Events"의 두 가지 옵션이 있습니다. ->탭하면 도시 정보 하위 페이지의 하위 페이지로 이동하고 지정된 제목 (예 : 최근 뉴스 또는 새 이벤트)이 있고 그 아래에 도시 이름이 표시됩니다. 내 문제는이 페이지에서이 페이지에 뉴스 항목이나 이벤트 항목을 표시 할 수 없다는 것입니다. 특히 둘 이상이있을 수 있기 때문에 * ngFor가이 모두에 맞는 위치를 알 수 없습니다.

  • 답변 # 1

    객체 내의 배열 인 속성에 액세스하는 것이 * ngFor에서 잘 작동하지 않는다는 것을 발견했습니다.이 문제를 해결하기 위해 한 것은 .ts 파일에서 배열 ... 그래서 다음과 같이하는 대신 : .ts 파일 :

    getNewsItems(index: number) {
       return this.cities[i].newsItems as any[]; // 'as any[]' might not be needed
    }
    
    

    html :

    <div *ngFor="let city of cities; index as i;">
        <div *ngFor="let newsItem of getNewsItems(i)">{{newsItem.body}}</div>
    </div>
    
    

관련 자료

  • 이전 amazon web services - AWS Glue의 ETL 작업 — 데이터를 덮어 쓸 수 있습니까?
  • 다음 php - 관리자 국가 별 맞춤 판매 주문