Блог

Главная - Вопросы по программированию - Не удается прочитать свойство ‘username’ неопределенного Javascript / Typescript

Не удается прочитать свойство ‘username’ неопределенного Javascript / Typescript

#javascript #angular #typescript

#javascript #angular #typescript

Вопрос:

Я пытаюсь создать список объектов профиля, а затем отобразить определенные элементы каждого объекта в списке. Я создал общедоступный интерфейс с именем Profile, импортировал его в свой компонент, а затем создаю новый объект типа Profile и присваиваю id, username, and profilepic .

Проблема в том, что, хотя я могу настроить и назначить объект моему массиву, мой *ngFor оператор, похоже, не видит атрибуты id,username, or profilepic . Я нахожу это странным, потому что, если я вызываю console.log(curP.username); , я получаю правильное имя пользователя в консоли. Я что-то неправильно определил? console.log(this.displayActiverUser); также возвращает правильный список пользователей с id,username,profilepic .

Интерфейс:

 export interface Profile {
    id: any;
    username: any;
    profilePic: any;
}

Компонент:

 displayActiveUser = new Array<Profile>(10); //this is the array displayed as users
activeUserArray = new Array(10);

for (var n = 0; n < numAvalAcct; n  ){
    let curP: Profile = {id: parseInt(this.activeUserArray[n][1]),username: this.activeUserArray[n][0], profilePic: "testurl"};
          console.log("usernm", curP.username);
          this.displayActiveUser[n] = curP;
        }

HTML * ngFor (Ошибка появляется в строке, где {{profile.username}} 

 <div class="list-group">
                <a *ngFor="let profile of displayActiveUser" (click)="followedNewUser(profile)" href="" target="popup"  class="list-group-item list-group-item-action">
                    <img src="" class="rounded-circle" alt="profile picture" width="25" height="25"> {{profile.username}} 
                </a>
</div>

Вывод для console.log(this.displayActiverUser); 

 0: {id: 135, username: "adamhaddad4", profilePic: "testurl"}
1: {id: 136, username: "ian.mccleary", profilePic: "testUrl"}
2: {id: 1, username: "dddd", profilePic: "testurl"}
3: {id: 134, username: "timtim1", profilePic: "testUrl"}

РЕДАКТИРОВАТЬ: полная ошибка:

 ERROR TypeError: Cannot read property 'username' of undefined
    at FollowForFollowComponent_a_6_Template (follow-for-follow.component.html:8)
    at executeTemplate (core.js:7329)
    at refreshView (core.js:7198)
    at refreshEmbeddedViews (core.js:8289)
    at refreshView (core.js:7222)
    at refreshComponent (core.js:8335)
    at refreshChildComponents (core.js:6991)
    at refreshView (core.js:7248)
    at refreshEmbeddedViews (core.js:8289)
    at refreshView (core.js:7222)

Комментарии:

1. Не могли бы вы поделиться своим сообщением об ошибке? @Ian McCleary

2. ОШИБКА @Muthupriya ОШИБКА ТИПА: не удается прочитать свойство ‘username’ неопределенного значения в FollowForFollowComponent_a_6_Template (follow-for-follow.component.html:8) в ExecuteTemplate (core.js: 7329) в refreshView (core.js: 7198) в refreshEmbeddedViews (core.js: 8289) в refreshView (core.js: 7222) в refreshComponent (core.js: 8335) в refreshchildcontents (core.js: 6991) в refreshView (core.js: 7248) в refreshEmbeddedViews (core.js: 8289) в refreshView (core.js: 7222)

3. Трудно понять, не видя больше кода, но я бы поспорил, что представление выполняется до того, как вы скопировали элементы в displayActiveUser массив. Вы инициализировали его как массив из 10 элементов, поэтому ngFor выполняется, но каждый элемент undefined , потому что они еще не были скопированы.

4. Вы создали массив с 10 пустыми ячейками и заполнили только 4.

5. Вы были правы! Я только что понял это одновременно time….by инициализируя список из 10 элементов, мой view уже пытался отобразить список до того, как были назначены мои значения. Я исправил это, используя .push() вместо this.displayActiveUser[n] = curP; . Если вы хотите превратить свой комментарий в ответ, не стесняйтесь. Спасибо!!

Ответ №1:

displayActiveUser = new Array<Profile>(10); создан массив с 10 неопределенными значениями в нем.

Что вы хотите сделать, это использовать функцию map для преобразования вашего источника в отображаемые данные. На самом деле мы не обращаемся к циклу for в современном JavaScript, люди склонны придерживаться таких функций, как map и filter .

 this.displayActiveUser = this.activeUserArray.map(user => transformUser(user));

где transformUser — это функция, которая выполняет сопоставление одного объекта с другим

Ответ №2:

 displayActiveUser = new Array<Profile>(10);

Инициализирует массив с 10 пустыми слотами.

Смотрите Конструктор массива.

Вывод отладки показывает, что вы заполнили только 4 слота, остальные все еще пусты.

Ответ №3:

Создайте класс, который реализует интерфейс: 

 export interface ProfileInterface {
  id: any;
  username: any;
  profilePic: any;
}

export class Profile implements ProfileInterface {
  id = null;
  username = '';
  profilePic = null;
}

Я протестировал код. Наслаждайтесь кодированием!