Ob'ektlar qatorida * ngFor bilan qanday bog'lanishi mumkin?

Men angular2 ni o'rganyapman, shuning uchun agar men ahmoqona savol so'rasam, meni kechir. Ob'ektlarning qatorlarini olaman va shunday ko'rinadi:

obj.json

data: [
        {
           item: "banana"
        }
     ],
     [
        {
           item: "apple"
        }
     ],
     [
        {
           item: "lemon"
        }
     ]

Komponentiyamdagi faylda uni doirada qamrab olishimga muvaffaq bo'ldim:

this.fruits = data[0].item;

Muammo men faqat birinchi elementni, ikkinchi elementni va boshqalarni qamrab olishni boshlayman. Qanday qilib ularning barchasini qamrab olishi va keyin ularni * ngFor bilan HTML faylida ko'rsatishim mumkin?

Rahmat

1
Bu bekor ob'ekt.
qo'shib qo'ydi muallif kind user, manba

7 javoblar

Sizning qatoringiz JavaScript-ni to'g'ri emas. Sizning ma'lumotlaringiz haqiqatan ham shunday deb hisoblasa:

data: [
        {
           item: "banana"
        },
        {
           item: "apple"
        },
        {
           item: "lemon"
        }
     ]

Keyinchalik shunday ma'lumotlar orqali yinelansiz:

  • {{fruit.item}}
  •  
    
    4
    qo'shib qo'ydi
    @tholo Muammo kalitlarning soni emas, balki kvadrat qavslarni joylashtirish. Asosan JavaScript-ni tashkil etuvchi yagona ob'ektlarning qatorlari ro'yxati mavjud.
    qo'shib qo'ydi muallif Cobus Kruger, manba
    Ob'ektlarni bir soniya uchun unuting, keyin sizning deklaratsiya shunday ko'rinadi: data: [], [], [] . Bu JavaScript-ni to'g'ri emas. ma'lumotlar: [[], [], []] (qatorlar majmuasi) yoki ma'lumotlar: [] (qator) bo'lishi mumkin, lekin ko'rsatganingiz emas.
    qo'shib qo'ydi muallif Cobus Kruger, manba
    Men barcha narsalarni qo'ymadim, lekin kalit elementdan tashqari boshqa kalitlar ham mavjud. Men uchun muhim bo'lgan narsa - bularning barchasini olish uchun katalog orqali indekslar orqali pastga aylanishim mumkin. Iltimos, indeks sonining nima ekanligini bilmayman.
    qo'shib qo'ydi muallif tholo, manba
    siz meni tushunmadingiz. Menda bitta narsalar qatorlari ro'yxati yo'q, menda boshqa narsalar ham bor, lekin men ularni nomlamadim, chunki ular mening misolim uchun muhim emas.
    qo'shib qo'ydi muallif tholo, manba

    Sizning qatoringiz JavaScript-ni to'g'ri emas. Sizning ma'lumotlaringiz haqiqatan ham shunday deb hisoblasa:

    data: [
            {
               item: "banana"
            },
            {
               item: "apple"
            },
            {
               item: "lemon"
            }
         ]
    

    Keyinchalik shunday ma'lumotlar orqali yinelansiz:

  • {{fruit.item}}
  •  
    
    4
    qo'shib qo'ydi
    @tholo Muammo kalitlarning soni emas, balki kvadrat qavslarni joylashtirish. Asosan JavaScript-ni tashkil etuvchi yagona ob'ektlarning qatorlari ro'yxati mavjud.
    qo'shib qo'ydi muallif Cobus Kruger, manba
    Ob'ektlarni bir soniya uchun unuting, keyin sizning deklaratsiya shunday ko'rinadi: data: [], [], [] . Bu JavaScript-ni to'g'ri emas. ma'lumotlar: [[], [], []] (qatorlar majmuasi) yoki ma'lumotlar: [] (qator) bo'lishi mumkin, lekin ko'rsatganingiz emas.
    qo'shib qo'ydi muallif Cobus Kruger, manba
    Men barcha narsalarni qo'ymadim, lekin kalit elementdan tashqari boshqa kalitlar ham mavjud. Men uchun muhim bo'lgan narsa - bularning barchasini olish uchun katalog orqali indekslar orqali pastga aylanishim mumkin. Iltimos, indeks sonining nima ekanligini bilmayman.
    qo'shib qo'ydi muallif tholo, manba
    siz meni tushunmadingiz. Menda bitta narsalar qatorlari ro'yxati yo'q, menda boshqa narsalar ham bor, lekin men ularni nomlamadim, chunki ular mening misolim uchun muhim emas.
    qo'shib qo'ydi muallif tholo, manba

    Ob'ektiz haqiqiy emas. Men uni tahrirladim.

    Ob'ekt xususiyatlarini qayta ishlatish uchun quyidagilarni foydalaning:

    • {{ elem.item }}
    
    

    Ishlayotgan plunker

    2
    qo'shib qo'ydi
    export class SomeClass {
        public name: String;
        constructor(_name: String){
           this.name= _name;
        }
    }    
    
    let fruits : Array[new SomeClass("banana"),new SomeClass("apple"),new SomeClass("lemon")];
    
    
    
    1
    qo'shib qo'ydi
    export class SomeClass {
        public name: String;
        constructor(_name: String){
           this.name= _name;
        }
    }    
    
    let fruits : Array[new SomeClass("banana"),new SomeClass("apple"),new SomeClass("lemon")];
    
    
    
    1
    qo'shib qo'ydi

    Muammoni aniq ko'rmadim. Buni ham qo'llayman.

    Menda ob'ektlar majmuasi mavjud: private receipts: receipt [] - bu yerda ba'zi ma'lumot mavjud bo'lgan ob'ekt

    export class receipt {
        public imageData;
        private accountNo;
        private tripNo;
        private ticketType;
        //..getters/setters and other variables
    }
    

    Endi qatorni to'ldirganimdan so'ng, uni shunchaki ishlatishingiz mumkin (bu ion-slaydlarni nevermind, bu divs da ishlaydi):

    
         <div>
            
         ...
    
    

    This behaves as expected. For form, you can also use {{entry.imageData}} if it's an accessible property (Yes, I tested this)

    Similarily for nested Objects you should be able to simply {{entry.someSubObject.someSubSubObject}}

    Hope this helps.

    0
    qo'shib qo'ydi

    Muammoni aniq ko'rmadim. Buni ham qo'llayman.

    Menda ob'ektlar majmuasi mavjud: private receipts: receipt [] - bu yerda ba'zi ma'lumot mavjud bo'lgan ob'ekt

    export class receipt {
        public imageData;
        private accountNo;
        private tripNo;
        private ticketType;
        //..getters/setters and other variables
    }
    

    Endi qatorni to'ldirganimdan so'ng, uni shunchaki ishlatishingiz mumkin (bu ion-slaydlarni nevermind, bu divs da ishlaydi):

    
         <div>
            
         ...
    
    

    This behaves as expected. For form, you can also use {{entry.imageData}} if it's an accessible property (Yes, I tested this)

    Similarily for nested Objects you should be able to simply {{entry.someSubObject.someSubSubObject}}

    Hope this helps.

    0
    qo'shib qo'ydi
    Angular Uzbekistan
    Angular Uzbekistan
    107 ishtirokchilar

    Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

    Javascript UZB
    Javascript UZB
    99 ishtirokchilar

    @js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb

    ngTashkent
    ngTashkent
    77 ishtirokchilar

    Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks