Question

我是Angular的新手。我有一些想在应用程序中显示的伪数据。

当我将变量设置为与我创建的接口相等时，标题中总是出现错误。

这是我的db-data.ts文件。


export const INPUTS: any = {
  0: {
    id: 0,
    inputName: 'testing',
    required: true,
    deleted: false,
    values: [
      'Initial',
      '1st Appeal',
      '2nd Appeal'
    ]
  },
  1: {
    id: 1,
    inputName: 'testing',
    required: true,
    deleted: false,
    values: [
      'Initial',
      '1st Appeal',
      '2nd Appeal'
    ]
  },
  2: {
    id: 2,
    inputName: 'testing',
    required: true,
    deleted: false,
    values: [
      'Initial',
      '1st Appeal',
      '2nd Appeal'
    ]
  }
};

这是我的界面product-input.ts文件

export interface ProductInput {
  id: number;
  inputName: string;
  required: boolean;
  deleted: boolean;
  values: string[];
}

这是组件menu.component.ts文件。

import { Component, OnInit } from '@angular/core';
import { ProductInput } from '../../model/product-input';
import {INPUTS} from '../../model/db-data';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

  productInput: ProductInput[] = [];

  constructor() { }

  ngOnInit() {
    const inputs = Object.values(INPUTS);

    this.productInput = inputs.filter(input => input.inputName === 'testing');
  }

}

我希望查看从json文件获取的值列表。我在做什么错了？

Answer 1

一团糟-

1）产品输入应为数组。因此，应更改其名称和类型。

2）您需要在过滤方法中使用===。

productInputs: ProductInput[] = [];

constructor() { }

ngOnInit() {
    const inputs = Object.values(INPUTS);

    this.productInputs = inputs.filter((input) => input.inputName === 'testing');
}

Answer 2

您应该改为这样做：

在您的db-data.ts中：

 export const INPUTS: any = [
     {
       id: 0,
       inputName: 'hello',
       required: true,
       deleted: false,
       values: [
         'Initial',
         '1st Appeal',
         '2nd Appeal'
       ]
     },
     {
       id: 1,
       inputName: 'testing',
       required: true,
       deleted: false,
       values: [
         'Initial',
         '1st Appeal',
         '2nd Appeal'
     ]
     },
     {
       id: 2,
       inputName: 'testing',
       required: true,
       deleted: false,
       values: [
         'Initial',
         '1st Appeal',
         '2nd Appeal'
       ]
     }
   ];

并在您的ngOnInit中写下：

this.productInput = this.INPUTS.filter((input) => input.inputName === 'testing');
console.log(this.productInput);

类型“ {} []”缺少类型“ ProductInput”的以下属性：id，inputName，必需，已删除，值[]

2 个答案: