javascript - Angular 5 קבלת בעיית מערך עם נתונים מהשירות לרכיב ולתבנית

מנסה להציג נתונים בתבנית HTML מקריאת שירות מרכיב שקורא ומחזיר API, אבל אני מקבל את השגיאה הזו

שגיאה ERROR: לא ניתן למצוא משתנה תמיכה עבור האובייקט '[object Object]' מסוג 'object'. NgFor תומך רק בקישור לאיטרטיביים כגון מערכים.

HTML

<li *ngFor="let item of testing"> 
   <a [routerLink]="[item.url]" > 
    <span>{{item.name}}</span>
   </a>
</li>

רכיב

testing: any;

this.arsSevice.getMenu()
     .subscribe(
         result => {
            this.testing = result;
            console.log('menu',result);
      },
      error => {
         console.log('menu error', error);
      }
      )

שירות :

getMenu()  {
    return this.http.post(this.menuUrl, JSON.stringify({
        "UserID": 61525,
        "AppID": 15,
        "NavAppID":null,
        "AppGroupID": 116,
        "SelectedCaseID": 0,
        "SelectedRoleID":0            
    }), httpOptions)
        .map((response: Response)=> {
            return response;
        })
}

צילום מסך של הנתונים

עדכון

אני רואה בעיית נתונים

"תפריט" מכיל data: ומה שפה, וכאן זה לא עובד.

העובד הוא מקריאת API שונה שים לב שיש לו

נתונים: מערך(16)

איך אני יכול לתקן את הנתונים שלי מאובייקט למערך?

תשובה #1

שירות Http מחזיר אובייקט Response, והקריאה ל-json() עליו אמורה לתת לך את הנתונים שהוחזרו מהשרת.

שנה את return response; ל-return response.json();

תשובה #2

נסה את זה: *ngFor="let item of testing.data.Menu1Items". אני לא מאמין שאתה צריך את pipe ה-async בשביל זה. אני גם הייתי משתמש ב-*ngIf על כל div שמכיל את לולאת ה-*ngFor.

ככה:

<div *ngIf="testing">
    <li *ngFor="let item of testing.data.Menu1Items"> 
       <a [routerLink]="[item.url]" > 
        <span>{{item.name}}</span>
       </a>
    </li>
</div>

תן לי לדעת אם זה יכול לעזור במה שאתה מנסה להשיג.

עריכה :

לכן אני ממליץ לעצב את הנתונים שלך בצורה שונה כאשר אתה מחזיר תשובה ללקוח שלך, כך אני אעצב את הנתונים לפני שהם מוחזרים:

[
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu1Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu1Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu2Items'
  },
  {
    actionType: '',
    displayName: 'MyiCIS',
    displayOrder: '1',
    displayOrder1: null,
    groupName: 'Data Entry',
    id: 420,
    url: 'MyiCIS.asp',
    type: 'Menu2Items'
  }
];

אז אם אתה רוצה לקבץ את הנתונים לפי כל שדה שתבחר, הפעל את המערך דרך השיטה הזו והיא תוציא את הנתונים מקובצים למערכים נפרדים:

transformArray(array: Array<any>, field) {
    if (array) {
      const groupedObj = array.reduce((prev, cur) => {
        if (!prev[cur[field]]) {
          prev[cur[field]] = [cur];
        } else {
          prev[cur[field]].push(cur);
        }
        return prev;
      }, {});
      return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
    }
    return [];
  }

הנה יומן הקונסולה של הנתונים לפני שהם עוברים שינוי ולאחר שהם שונו:

אז המערך הראשון הוא פשוט מה שצריך להיות מוחזר מהשרת, והמערך השני הוא אחרי השינוי.

אז כדי לעבור על זה בלייבל שלך, הנה המבנה של *ngFor:

<div *ngFor"let category of data">
  <div>{{ category.key }}</div>
  <div *ngFor="let item of category.value">
    {{ value.name }}
  </div>
</div>

אני מקווה שזה יכול לעזור, אני חושב שהצעד הראשון שלך צריך להיות עיצוב המערך הזה לפני שהוא יוחזר ללקוח כמערך של אובייקטים שלא מקובצים לפי מפתח, ואז לנהל את הנתונים ברגע שהם מגיעים ללקוח שלך.