|
Ошибка при использовании метода subscribe Angular
#39907833
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Здравствуйте!
Делаю учебный проект на Angular(по книге).
На этапе выведения данных подчёркивается метод subscribe, с ошибкой, что свойство subscribe не существует в данном типе данных. Подчёркивается также входная переменная p метода map и все входные переменные метода filter - c, index, array.
product.repository.ts :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
import { Injectable } from "@angular/core";
import { Product } from "./product.model";
import { StaticDataSource } from "./static.datasource";
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ProductRepository {
private products: Product[] = [];
private categories: string[] = [];
constructor(private dataSource: StaticDataSource) {
dataSource.getProducts.subscribe(data => {
this.products = data;
this.categories = data.map(p => p.category)
.filter((c, index, array) => array.indexOf(c) ==index).sort();
});
}
getProducts(category: string = null): Product[] {
return this.products
.filter(p => category == null || category == p.category);
}
getProduct(id: number): Product {
return this.products.find(p => p.id == id);
}
getCategories(): string[] {
return this.categories;
}
}
static.datasource.ts :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
import { Injectable } from "@angular/core";
import { Product } from "./product.model";
import { Observable } from "rxjs/Observable";
import "rxjs/add/observable/from";
@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),
new Product(3, "Product 3", "Category 1", "Product 3 (Category 1)", 100),
new Product(4, "Product 4", "Category 1", "Product 4 (Category 1)", 100)
];
getProducts(): Observable<Product[]> {
return Observable.from([this.products]);
}
}
app.module.ts :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
main.ts :
1.
2.
3.
4.
5.
6.
7.
8.
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
//import { environment } from './environments/environment';
platformBrowserDynamic().bootstrapModule(AppModule);
Здесь import environment тоже чертит.
package.json :
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
{
"name": "helloapp",
"version": "1.0.0",
"description": "First Angular 8 Project",
"author": "Eugene Popov <metanit.com>",
"scripts": {
"dev": "webpack-dev-server --hot --open",
"build": "webpack",
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"json": "json-server data.js -p 3500 -m authMiddleware.js"
},
"dependencies": {
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/http": "^8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"bootstrap": "8.0.0-alpha.4",
"core-js": "^3.1.3",
"font-awesome": "4.7.0",
"rxjs": "^6.5.2",
"rxjs-compat": "^6.5.3",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular/cli": "1.0.0",
"@angular/compiler-cli": "^4.0.0",
"@types/jasmine": "2.5.38",
"@types/node": "^12.0.0",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "^3.5.0",
"json-server": "0.8.21",
"jsonwebtoken": "7.1.9",
"webpack": "^4.32.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^5.2.1"
}
}
|
|
|
