Question

我正在研究Angular 4.我试图使用for循环来循环对象/数组。我在控制台中获得输出但在构建和编译中获取错误。不知道我在做什么错误。

我的数据看起来像这样

let ArrayVal =  [{
       comparator: 'EQ',
       flight: [{
           number: 123
          }, {
           grouping: 'Flight Group South America'
          }]
      }, {
       comparator: 'NEQ',
       flight: [{
           number: 7000,
           endNumber: 7999
          }]
      }];

现在我需要从上面的数据中获取数字，预期输出是数字= [＆＃39; 123＆＃39;＆＃39; 7000-7999＆＃39;]

所以试过这样的事情

let numbers: any = [];
for ( let val of ArrayVal){
 for (let flight of val.flight) {
    if ( flight.hasOwnProperty('number') && flight.hasOwnProperty('endNumber') ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    }else if  (flight.hasOwnProperty('number')) {
      numbers.push(flight.number);
    }
 }
}
console.log(numbers)

我在控制台编号= [123，＆＃34; 7000-7999＆＃34;]中按预期获得输出但是在构建和编译时出现问题

TS2339: Property 'endNumber' does not exist on type '{ number: number; } | { grouping: string; }'.
      Property 'endNumber' does not exist on type '{ number: number; }'.
TS2339: Property 'number' does not exist on type '{ number: number; } | { grouping: string; }'.
  Property 'number' does not exist on type '{ grouping: string; }'.

有人可以告诉我并帮我循环这些数据。 flight.number 提供错误属性编号不存在类型＆＃39; {number：number; } | {grouping：string; }＆＃39;

Answer 1

将any[]添加到ArrayVal的声明中。

这是因为TypeScript试图推断数组中包含的对象的结构，但是由于flight数组上的结构不同，所以它错了。

检查以下playground

更新：

更清晰的方法是为您的数据定义接口（这实际上意味着使用TS）：

interface Data {
  comparator: string;
  flight: Flight[];
}

interface Flight {
  'number'?: number;
  grouping?: string;
  endNumber?: number;
}

let data: Data[] = [{
       comparator: 'EQ',
       flight: [{
           'number': 123
          }, {
           grouping: 'Flight Group South America'
          }]
      }, {
       comparator: 'NEQ',
       flight: [{
           'number': 7000,
           endNumber: 7999
          }]
      }];

let numbers: any = [];

for ( let val of data){
 for (let flight of val.flight) {
    if ( flight.hasOwnProperty('number') && flight.hasOwnProperty('endNumber') ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    }else if  (flight.hasOwnProperty('number')) {
      numbers.push(flight.number);
    }
 }

}
console.log(numbers)

Answer 2

而不是：

for (let flight of val.flight) {
    if ( flight.hasOwnProperty('number') && flight.hasOwnProperty('endNumber') ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    }else if  (flight.hasOwnProperty('number')) {
      numbers.push(flight.number);
    }
 }

你可以这样做：

 for (let flight of val.flight) {
    if ( flight?.number && flight?.endNumber ) {
      numbers.push(flight.number + '-' + flight.endNumber );
    } else if (flight?.number) {
      numbers.push(flight.number);
    }
 }

这是为了确保number和endNumber不是0。

TypeScript提供有关对象属性访问的警告

2 个答案: