Question

我正在做一个 Angular 应用程序。当我想为空数组赋值时遇到问题

我正在使用

node 12.18.4
npm 6.14.8

我写了一个这样的 typescript.ts

import { Injectable } from "@angular/core";
import { Product } from "./product.model";
import { StaticDataSource } from "./static.datasource";

@Injectable()
export class ProductRepository {

    private categories: string[] = [];

    constructor(private dataSource: StaticDataSource) {
 dataSource.getProducts().subscribe(data => {
        ().subscribe(data => {
            this.categories = data.map(p => p.category)
                .filter((c, index, array) => array.indexOf(c) == index).sort();
        });
    }   
}

这里是Products和GetProducts()的定义

@Injectable()
export class StaticDataSource {
    private products: Product[] = [
        new Product(1, "Product 1", "Category 1", "Product 1 (Category 1)", 100),
        new Product(2, "Product 2", "Category 1", "Product 2 (Category 1)", 100),
    ];

    getProducts(): Observable<Product[]> {
        return from([this.products]);
    }

Products 的定义是

export class Product {

    constructor(
        public id?: number,
        public name?: string,
        public category?: string,
        public description?: string,
        public price?: number) { }
}

我有编译错误

 Error:    
Type (string | undefined)[] is not assignable to Type String. On line

      this.categories = data.map(p => p.category)
      .filter((c, index, array) => array.indexOf(c) == index).sort();

问题在于Products的定义在构造函数中，所有属性都可以为空...如果我在构造函数中删除 ? 。它工作正常。

如何编写此查询

this.categories = data.map(p => p.category)
                    .filter((c, index, array) => array.indexOf(c) == index).sort();

哪里的数据可以为空？

谢谢

Answer 1

请检查数组 'data' 的每个元素是否都有键 'category'，并且所有 category 的值都不是未定义的。

示例：如果

data =  [{category:'a'},{categories:'b'},{category:'c'}];

然后

data.map(p => p.category)
  .filter((c, index, array) => array.indexOf(c) == index).sort();

给出：

["a", "c", undefined]

属于哪种类型

Type (string | undefined)[]

解决办法：将您的代码修改为：

data.map(p => p.category)
  .filter((c, index, array) => c && array.indexOf(c) == index).sort();

在您的过滤器中，只需检查当前元素值是否有效。

Answer 2

首先，().subscribe 不是对 observable 的有效订阅，但我猜您在此处添加了它作为示例。

您收到错误是因为您在订阅中获得的内容可能为空/未定义（您在严格模式下运行，这很好，但它可能会使 Angular 的新手感到困惑）。您可以在将数据分配给您的属性之前检查订阅内部是否存在数据，或者使用 RxJS filter 运算符。

myObservable$.pipe(filter(data => !!data)).subscribe(data => {
  this.categories = data!.map(p => p.category)
      .filter((c, index, array) => array.indexOf(c) == index).sort();
})

提示：使用 ngOnInit() 代替构造函数来初始化您的数据。此外，为了提高性能，请尽可能使用异步管道，而不是在控制器中手动订阅。

Answer 3

这个问题可能是同时声明和初始化的结果，你可以试试这个：

private categories: string[];

角度错误：当将值分配给空字符串 [] 时，获取错误类型 (string | undefined)[] 不可分配给类型字符串

3 个答案: