Angular 4 - Http для HttpClient - свойство 'someproperty' не существует в типе Object

Я пытаюсь изменить существующее приложение с помощью Http на использование HttpClient, однако у меня есть ошибка.

Итак, теперь в моей службе вы можете увидеть новый код и старый код, который был прокомментирован:

constructor(
        // private http: Http
        private http: HttpClient
    ) { }

    getSidebar() {
        // return this.http.get('http://localhost:3000/sidebar/edit-sidebar')
        //     .map(res => res.json());
        return this.http.get('http://localhost:3000/sidebar/edit-sidebar');
    }

И в моем page.component.ts у меня есть это

this.sidebarService.getSidebar().subscribe(sidebar => {
                        this.sidebar = sidebar.content; // this does not work now
                    });

Однако для строки, над которой я прокомментировал эту ошибку, теперь я получаю следующую ошибку:

Property 'content'
 does not exist on type 'Object'.

Однако, если я console.log(sidebar), я получаю следующее:

{_id: "59dde326c7590a27a033fdec", content: "<h1>sidebar here</h1>"}

Так в чем проблема?

Еще раз, Http работает, но HttpClient не работает.

Ответ 1

Вы можете указать возвращаемый тип, используя интерфейс, класс и т.д. Например, вы можете использовать что-то вроде следующего:

return this.http.get<Sidebar>('http://localhost:3000/sidebar/edit-sidebar');

В качестве примера боковая панель может быть определена как:

interface Sidebar {
    _id: string;
    content: string;
}

См. Указание ответа из документов Angular для получения дополнительной информации:

... TypeScript правильно скажет, что объект, возвращающийся из HTTP, не имеет свойства результатов. Это связано с тем, что в то время как HttpClient анализировал ответ JSON в Object, он не знает, какая форма этого объекта.

Ответ 2

альтернативное решение с использованием скобки:

this.sidebar = sidebar["content"];

который возвращает значение в HttpClient, HttpClient автоматически анализирует ответ JSON на объект, и форма этого объекта неизвестна, поэтому Typescript отображает эту ошибку

Ответ 3

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

this.sidebarService.getSidebar().subscribe((sidebar: any) => {
                        this.sidebar = sidebar.content; 
                    });

Ответ 4

Вы можете сделать это так с типом <any>

если вы сделаете это, вы не получите эту ошибку

this.http.get<any>('http://localhost:3000/sidebar/edit-sidebar');

Ответ 5

Использование скобочного обозначения вместо точечного обозначения для ссылки на sidebar['content'] вместо sidebar.content решит проблему.

В разделе Проверка типов в ответных документах Angular на HttpClient упоминается об этом, хотя и не все так ясно:

Для обратного вызова подписки выше требуется скобочная запись для извлечения значений данных. Вы не можете написать data.heroesUrl потому что TypeScript правильно жалуется, что объект данных из сервиса не имеет свойства heroesUrl.

Ответ 6

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

this.sidebarService.getSidebar().subscribe((sidebar: Sidebar) => {
    this.sidebar = sidebar.content;
});

interface Sidebar {
    _id?: string;
    content?: string;
}

Ответ 7

Описание ошибки

ОШИБКА в src/app/home.component.ts(131,20): ошибка TS2339: свойство "SomeProperty" не существует для типа "{}".

почему произошло?

Я думаю, что эта ошибка в служебном файле, всякий раз, когда вы делаете http-вызов, и этот вызов возвращает любой объект (json) или массив объектов (json), тогда ваш http-вызов должен возвращать Observable или Model с таким типом результата

Home.service.ts

   connectToServer(data)  {
        return this.http.post('http://localhost:5000/connect' , data)
    }

Предположим, у меня есть выше Пост HTTP-вызов, где я подключаюсь к серверу, передавая данные внутри "данных", и этот запрос возвращает мне объект подключения (Json). Но где вы видели, что я не указал наблюдаемый или модель для удержания result и если я получу доступ к свойствам объекта result из component.ts, он скажет, что result.somepropery не существует в {}.

Решения

Первый:

connectToServer(data) : Observable<any> {
            return this.http.post('http://localhost:5000/connect' , data)
        }

Примечание. Не забудьте импортировать Observable

Второе:

  connectToServer(data) :  <Connection> {
                return this.http.post('http://localhost:5000/connect' , data)
            }

Во втором случае вам нужно определить Интерфейс для объявления полей Объекта соединения и его необходимо импортировать здесь.