برگشت به دوره

کار با router - ارسال پارامتر

پیشرفت شما: ٪0
0/29 جلسه
آموزش کامل Angular

برای مشاهده دوره ابتدا لازمه وارد بشی یا ثبت‌نام کنی

ورود و عضویت
0
0

معرفی دوره

ویدیو آموزشی 10:55

نصب و راه اندازی

ویدیو آموزشی 21:38

شخصی سازی نصب

ویدیو آموزشی 11:18

ساخت و کار با Component

ویدیو آموزشی 20:02

ارسال اطلاعات به view

ویدیو آموزشی 11:35

Input ها در Component

ویدیو آموزشی 10:49

Output ها در Component

ویدیو آموزشی 18:31

روش two way data binding

ویدیو آموزشی 18:03

طرح بندی component ها

ویدیو آموزشی 10:02

کار با Directive ها - بخش اول

ویدیو آموزشی 17:02

کار با Directive ها - بخش دوم

ویدیو آموزشی 17:02

کار با فرم ها - بخش اول

ویدیو آموزشی 42:30

کار با فرم ها - بخش دوم

ویدیو آموزشی 24:18

پروژه Task - قسمت اول

ویدیو آموزشی 14:28

پروژه Task - کار با pipe ها

ویدیو آموزشی 32:14

پروژه Task - قسمت سوم

ویدیو آموزشی 16:37

پروژه Task - عملیات CURD

ویدیو آموزشی 28:59

توضیحات

در این جلسه ، پروژه خودمون رو ادامه میدیم و single page وبسایت خودمون رو ایجاد میکنیم ! برای ایجاد چنین صفحه ای ابتدا شما باید slug مقاله مورد نظر رو از طریق url دریافت کنید و بعد با درخواست http اطلاعات مربوط به مقالتون رو در سایت نمایش بدید . 

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

مهدی 5 سال پیش

سلام
ببخشید استاد من نمیدونستم که نباید فینگلیش تایپ کنم....
من کارهایی که شما به من گفتین را انحام دادم و الان فقط یک error دیه دارم
این الان کدی است که نوشتم:

this.articles = this.route.paramMap.pipe(
switchMap(params => {
console.log(params.get("id"));
const id: string = params.get("id");
return this.api.getAllArticle(id);
})
); }

و الان این error را میده:

src/app/article/article.component.ts:25:5 - error TS2740: Type 'Observable<any>' is missing the following properties from type 'Article[]': length, pop, push, concat, and 25 more.
25 this.articles = this.route.paramMap.pipe(
~~~~~~~~~~~~~

و console.log ایی هم که گرفتم الان control+shift+j زدم اینو نشون میده:

Failed to load resource: the server responded with a status of 404 (Not Found)

بازم ممنون که جواب سوال هامو دادین

حسام موسوی 5 سال پیش

شما الان یک url دارید که اطلاعاتی رو بر نیمگردونه و ارور 404 میده اول اینو درست کنید

Failed to load resource: the server responded with a status of 404 (Not Found)
مهدی 5 سال پیش

in code api.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { Article } from "../models/article";
@Injectable()
export class ApiService {
constructor(private http: HttpClient) {}
getAllArticle(pagenumber: number): Observable<any> {
return this.http
.get("http://localhost:8000/api/articles?page=" + pagenumber)
.pipe(map((res: any) => res.json()));
}
}

va inam code article.component.ts

import { Component, OnInit } from "@angular/core";
import { ApiService } from "../services/api.services";
import { ActivatedRoute, Params, ParamMap } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { Article } from "../models/article";
@Component({
selector: "app-article",
templateUrl: "./article.component.html",
styleUrls: ["./article.component.css"],
providers: [ApiService]
})
export class ArticleComponent implements OnInit {
message: string = "Article page";
articles: Article[]; //! ye property define kardam be esme articles va typesh ro article mizaram ke modeli hast ke ma tarifesh kardim dar folder models agar beram mibinamesh
constructor(private api: ApiService, private route: ActivatedRoute) {}
ngOnInit(): void {
this.articles = this.route.paramMap.pipe(
switchMap(params => {
const id: number = params.get("id");
return this.api.getAllArticle(id);
})
);
}
}

va alan in erroe haro daram:
src/app/article/article.component.ts:25:5 - error TS2740: Type 'Observable<unknown>' is missing the following properties from type 'Article[]': length, pop, push, concat, and 25 more.

25 this.articles = this.route.paramMap.pipe(

src/app/article/article.component.ts:28:39 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
28 return this.api.getAllArticle(id);
---
حسام موسوی 5 سال پیش

خواهشا ، در بخش توضیحات فارسی تایپ بفرمایید. فینگلیش پذیرفته نیست اصلا !
متاسفانه شما اصلا به حرف‌های که در دیدگاه پایین بهتون گفتم توجه نکردید و حتی کاری که گفتم رو هم انجام ندادید . برای همین دوباره ذکرشون می‌کنم.
در کد زیر

 getAllArticle(pagenumber: number): Observable<any> {

بجای number بزارید string
و همینطور در کد زیر

this.articles = this.route.paramMap.pipe(
switchMap(params => {
const id: number = params.get("id");
return this.api.getAllArticle(id);
})
);

در کنار تبدیل کردن کد زیر

     const id: number = params.get("id");

به

     const id: string = params.get("id");

این log قرار بدید ببینید براتون چی بر میگردونه

this.articles = this.route.paramMap.pipe(
switchMap(params => {
console.log(params.get("id"));
const id: number = params.get("id");
return this.api.getAllArticle(id);
})
);
مهدی 5 سال پیش

in code api.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";
import { Article } from "../models/article";
@Injectable()
export class ApiService {
constructor(private http: HttpClient) {}
getAllArticle(pagenumber: number): Observable<any> {
return this.http
.get("http://localhost:8000/api/articles?page=" + pagenumber)
.pipe(map((res: any) => res.json()));
}
}

va inam code article.component.ts

import { Component, OnInit } from "@angular/core";
import { ApiService } from "../services/api.services";
import { ActivatedRoute, Params, ParamMap } from "@angular/router";
import { map, switchMap } from "rxjs/operators";
import { Article } from "../models/article";
@Component({
selector: "app-article",
templateUrl: "./article.component.html",
styleUrls: ["./article.component.css"],
providers: [ApiService]
})
export class ArticleComponent implements OnInit {
message: string = "Article page";
articles: Article[]; //! ye property define kardam be esme articles va typesh ro article mizaram ke modeli hast ke ma tarifesh kardim dar folder models agar beram mibinamesh
constructor(private api: ApiService, private route: ActivatedRoute) {}
ngOnInit(): void {
this.articles = this.route.paramMap.pipe(
switchMap(params => {
const id: number = params.get("id");
return this.api.getAllArticle(id);
})
);
}
}

va alan in erroe haro daram:
src/app/article/article.component.ts:25:5 - error TS2740: Type 'Observable<unknown>' is missing the following properties from type 'Article[]': length, pop, push, concat, and 25 more.

25 this.articles = this.route.paramMap.pipe(
~~~~~~~~~~~~~
src/app/article/article.component.ts:28:39 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
28 return this.api.getAllArticle(id);
حسام موسوی 5 سال پیش

لطف کنید اگر این دیدگاه مربوط به دیدگاهی میشه به شکل پاسخ در همونجا ثبتش کنید. دیدگاه جدید نسازید.
در کد زیر

 getAllArticle(pagenumber: number): Observable<any> {

بجای number بزارید string
و همینطور در کد زیر

this.articles = this.route.paramMap.pipe(
switchMap(params => {
const id: number = params.get("id");
return this.api.getAllArticle(id);
})
);

در کنار تبدیل کردن کد زیر

     const id: number = params.get("id");

به

     const id: string = params.get("id");

این log قرار بدید ببینید براتون چی بر میگردونه

this.articles = this.route.paramMap.pipe(
switchMap(params => {
console.log(params.get("id"));
const id: number = params.get("id");
return this.api.getAllArticle(id);
})
);
مهدی 5 سال پیش

الان این error را میده:

src/app/article/article.component.ts:48:5 - error TS2740: Type 'Observable<unknown>' is missing the following properties from type 'Article[]': length, pop, push, concat, and 25 more.
48 this.articles = this.route.paramMap.pipe(
~~~~~~~~~~~~~
src/app/article/article.component.ts:51:39 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
51 return this.api.getAllArticle(id); // http request
~~
حسام موسوی 5 سال پیش

به پیام زیر دقت کنید

Argument of type 'string' is not assignable to parameter of type 'number'.

مثل اینکه type رو در ورودی به شکل عدد مشخص کردید ولی string پاس دادید.
لطفا لاگ بگیرید

مهدی 5 سال پیش
this.route.params
.map((params: Params) =&gt; params\['id'\])
.switchMap((id=۱) =&gt; this.api.getAllArticle(id))
.subscribe(res =&gt; {
this.articles =res data;
});

این کدی هست که شما ت. این قسمت نوشتید الا میشه همین رو بگیم چجوری باد تعغیر بدم که درست شه
ممنون

حسام موسوی 5 سال پیش

اینو تست کن

this.articles = this.route.paramMap.pipe(
switchMap(params => {
const id = params.get("id")
return this.api.getAllArticle(id) // http request
})
)
مهدی 5 سال پیش

سلام من این کد رو نوشتم :

this.route.params
.pipe(map((params: Params) =&gt; params\["id"\])
.switchMap((id = ۱) =&gt; this.api.getAllArticle(id))
.subscribe(res =&gt; {
//in res yani hamon id
console.log(res);
// this.articles = res.data;
});

اما این error میده:

src/app/article/article.component.ts:۲۹:۸ - error TS۲۳۳۹: Property 'switchMap' does not exist on type 'Observable<any>'.
۲۹ .switchMap.subscribe(res => {
~~~~~~~~~

من map , switchMap رو هم import کردم

import { map, switchMap } from "rxjs/operators";

اگه میشه به من بگین که چجوری کد بالارو درست بنویسم چون انگولار یه کم تعغیر کرده
ممنون

حسام موسوی 5 سال پیش

به شکل زیر باید انجام بدید

ngOnInit() {
this.hero$ = this.route.paramMap.pipe(
switchMap((params: ParamMap) =>
this.service.getHero(params.get('id')))
);
}
حسام موسوی 5 سال پیش

و البته اگر لینک زیر رو مشاهده بفرمایید کاملا براتون اورده چیکار باید کنید
https://angular.io/guide/router

آرشیو شده
در انتظار ثبت رای
مدت دوره 10:18:39
تعداد جلسات: 29
نوع دوره: فقط نقدی
شرکت‌کنندگان: 485 نفر
گواهی پایان دوره
وضعیت: ابتدا وارد سایت شوید
گواهی پایان دوره راکت چیست؟
حسام موسوی
مدرس دوره

بیشتر از ۱۵ سال هست که در حال برنامه‌نویسی و انجام پروژه های مختلف هستم و ۱۰ سالی هست که آموزش برنامه‌نویسی به علاقمندان حوزه برنامه نویسی میدیم در همه این مدت الان عاشق کدزنی و چالش‌های پروژه‌های مختلفم. به تدریس علاقه خاصی دارم و دوست دارم دانشی ک...