Свойство Angular 4 не существует в типе Object при сборке

Question

Я строю проект с использованием Angular, я начал проект с использованием Angular-Cli и когда я пытаюсь запустить ng build --prod я продолжаю получать эту ошибку:

Свойство 'description' не существует для типа Object

Код, генерирующий эту ошибку, выглядит следующим образом:

export class AppComponent {
    product: Object = {};

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}

<p>{{product.description}}</p>

Я читал некоторый контент по этому поводу, и ошибка в том, что я использую определение типа, чтобы определить продукт как объект, но я не передаю никакого определения свойства.

Я знаю, что могу определить интерфейс, как я это делал с массивами, но я не смог этого сделать. Я не знаю, правильно ли я это определяю, вот как я пытался:

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

product: Object<ProductInterface> = {};

Но это также дает мне ошибки. Что мне нужно сделать, чтобы избежать этого?

Answer 1

Для вашего первого примера. В вашем html вы говорите, что у продукта есть описание свойства (которого нет у типа Object)

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

product: ProductInterface = {};

В котором отсутствуют обязательные поля интерфейса. Таким образом, вы можете удалить инициализацию, оставив

product: ProductInterface;

Также, как отметили другие, вам не нужен синтаксис Object<>

Answer 2

Из моего дела..

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
} 

Просто добавив данные: любой при подписке работает нормально.

this.request.getProduct(_id).subscribe((data: any) => {
   this.product=data;
});

Это было бы полезно, в то время как данные ответа имеют больше пар ключ-значение. (Так сложно создать интерфейс.)

Answer 3

Если свойство является динамическим (неизвестным во время компиляции), вы можете использовать

someObject['someProperty']

вместо того

someObject.someProperty

Answer 4

Прежде всего, я бы просто использовал product: ProductInterface; и вам даже не нужно его инициализировать.

Тогда, вероятно, это исправит вашу ошибку {{ product?. description }}

Answer 5

В моем случае это сработало после установки моих свойств как публичных

Так что просто измени это

export interface ProductInterface {
    id: Number;
    description: String;
    title: String;
}

к этому

export interface ProductInterface {
    public id: Number;
    public description: String;
    public title: String;
}

Answer 6

Это безопасно использовать any скорее, чем Object когда данные запрашиваются с сервера, потому что мы не знаем, что будет возвращено с сервера. Таким образом, вам не нужно проверять тип:

export class AppComponent {
    product: any;

    constructor(
        private store: StoreService,
        private request: RequestService,
    ) {
        this.product = this.request.getProduct(_id);
    }
}

Answer 7

Вы должны определить запрос в методе OnInit, вашем контроллере, который реализует интерфейс OnInit, и определить новый метод

ngOnInit(){
    this.product = this.request.getProduct(_id); // who is _id
} 

Предполагая, что getProduct() является http-запросом, который возвращает наблюдаемый

this.request.getProduct(_id).subscribe((data) => {
   this.product=data;
});

Answer 8

Если вы используете команду ng serve и добиться успеха.

Возможно, у вас такие же проблемы с моим другим ответом:

Angular - как исправить ошибку "свойство не существует для типа"?

вам нужно изменить className.prod.ts нравиться className.ts

Answer 9

В Angular 16 ни одно другое решение не работало.

К счастью, в документации это ясно указано: вы можете использовать$any(...):

      {{ $any(product).unknownProperty }}