Оператор длины для массива объектов внутри объекта

Question

У меня есть ответ от API res, он имеет тип: {"plan":[{"name":"ABC"},{"name":"DEF"}]}. Я пытаюсь сохранить res в моем машинописном тексте, как показано ниже:

this.apiCall.apiMethod(this.headers, this.data)
  .subscribe(
    async (res: any) => {
      if (res) {
         for (let i = 0; i < res.plan.length; i ++){
         if (i < 3) {
         this.ppp.push(res.plan[i]);
         this.plans = this.ppp;

В моем HTML я связываю следующим образом:

<div class="columns" *ngFor="let p of plans; let i = index">

В моей консоли я получаю ошибка:

 TypeError: Cannot read property 'length' of undefined

Можете ли вы сказать мне, как я могу запустить для l oop и позже привязать к html массив объектов внутри объекта res?

Answer 1

Трудно ответить, если у вас нет ошибок при компиляции.

Вы можете попробовать использовать скобки и распространение ES6.

    if (res) {
     res["plan"].map((plan, index) => {
       if(index < 3){
         this.ppp = [...this.ppp,res["plan"][index]];
         this.plans = [...this.ppp];
       }

     });
  }

Answer 2

Используйте, как показано ниже

this.apiCall.apiMethod(this.headers, this.data)
  .subscribe(
    async (res: any) => {
      if (res && res.plan && res.plan.length) {
         for (let i = 0; i < res.plan.length; i ++){
         if (i < 3) {
         this.ppp.push(res.plan[i]);
         this.plans = this.ppp;

Answer 3

Если код компилируется без ошибок, то, скорее всего, это ошибка TS Lint. Вы можете определить тип, используя класс / интерфейс, или использовать скобку вместо записи через точку для доступа к свойствам. См. здесь для получения дополнительной информации о средствах доступа к свойствам JS.

Попробуйте следующее

for (let i = 0; i < res['plan'].length; i ++) {
  ...
}

Обновление: Интерфейс

В качестве альтернативы вы можете определите интерфейс для утверждения типа.

export interface Name {
  name: string;
}

export interface Plan {
  plan: Name[];
}

И определите спецификатор c вместо any.

this.apiCall.apiMethod(this.headers, this.data)
  .subscribe(
    async (res: Plan) => {       // <-- use `Plan` instead of `any` here
      if (res) {
         for (let i = 0; i < res['plan']length; i ++) {
           ...

Вам необходимо включить все возможные свойства в объект к интерфейсу, если у вас больше свойств, чем указано в вопросе.