۵۰٪ تخفیف فقط تا پایان جشنواره؛ بعدش همه‌چیز به قیمت قبل برمی‌گرده!

مشاهده دوره‌ها
ثانیه
دقیقه
ساعت
روز
راکت

کار نکردن افزودن آیتم از کامپوننت فرزند به والد

15 پاسخ

سلام وقتتون بخیر
من دو کامپوننت والد و فرزند به نام های پروژه (والد) و افزودن پروژه(فرزند) دارم.

  • درون کامپوننت پروژه ها ، لیستی از پروژه ها قرار میگیره.
  • درون کامپوننت افزودن پروژه ها ، فرمی قرار میگیره که بعد از ثبت شدن، باید یک پروژه رو به کامپوننت پروژه ها ارسال کنه.

فایل project.component.html :

<div class="projectsWrapper">
    <div class="projectItem" *ngFor="let project of projects" (addProject)="addProject(project)">
        <img [src]="project.img" alt="{{ project.name }}">
        <h6>{{ project.title }}</h6>
        <img  class="divider" src="../../assets/img/divider.png" alt="divider">
        <span><i class="la la-users"></i> : {{ project.teamCount }} نفر</span>
        <span><i class="la la-clock-o"></i> : {{ project.projectDate }}</span>
        <a [routerLink]="['/single']" class="projectMore"><i class="la la-link"></i>جزییات پروژه</a>
        <div class="projectFooter">
            <button type="button" mdbBtn class="edit" (click)="editProject(project)">ویرایش</button>
            <button type="button" mdbBtn class="remove" (click)="removeProject(project)">حذف</button>
        </div>
    </div>
</div>

فایل project.component.ts :

import { Component, OnInit } from '@angular/core';
import { newProjectForm } from '../shared/models/newProjectForm';

@Component({
    selector: 'app-projects',
    templateUrl: './projects.component.html',
    styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent implements OnInit {
    projects : newProjectForm[] = [];

    constructor() { }

    ngOnInit() {}

    removeProject( project : newProjectForm ){
        this.projects.splice(this.projects.indexOf(project) , 1);
    }

    addProject(project : newProjectForm){
        this.projects.push(project);
    }
}

فایل new-project.component.html :

<form [formGroup]="projectForm" (ngSubmit)="createProject(form)">
                    <h6>توسط این فرم ، پروژه ی خود را به لیست پروژه ها اضافه نمایید.</h6>

                    <span class="validateError" *ngIf="!projectForm.valid && projectForm.touched">تمامی مقادیر را باید وارد کنید. مقادیر خالی مجاز نمی باشد.</span>
                    <input formControlName="name" name="name" type="text" class="form-control mb-4" placeholder="نام پروژه را وارد کنید...">                    
                    <input formControlName="teamCount" name="teamCount" type="number" placeholder="تعداد اعضای تیم این پروژه را وارد کنید">

                    <label for="imgUpload"><i class="la la-cloud-upload"></i><span>تصویر مورد نظر برای این پروژه را انتخاب کنید</span></label>
                    <input formControlName="image" name="file" type="file" id="imgUpload">                        

                    <textarea formControlName="text" name="text" class="form-control rounded-0 mb-4" rows="6" placeholder="توضیحات پروژه را یادداشت نمایید..."></textarea>

                    <button mdbBtn type="submit" [disabled]="!projectForm.valid"><i class="la la-plus"></i>افزودن به لیست پروژه</button>
                </form>

فایل new-project.component.ts :

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormControl, FormGroup , Validators, FormBuilder } from "@angular/forms";
import { newProjectForm } from 'src/app/shared/models/newProjectForm';

@Component({
    selector: 'app-new-project',
    templateUrl: './new-project.component.html',
    styleUrls: ['./new-project.component.scss']
})
export class NewProjectComponent implements OnInit {
    @Output() addProject : EventEmitter<newProjectForm> = new EventEmitter<newProjectForm>();

    projects : newProjectForm;
    id = new FormControl('');
    name = new FormControl('' , [Validators.required , Validators.minLength(5)]);
    image = new FormControl('', Validators.required);
    text = new FormControl('' ,Validators.required);
    teamCount = new FormControl('' ,Validators.required);

    projectForm: FormGroup = this.formBuilder.group({
        id : this.id,
        name : this.name,
        image : this.image,
        text : this.text,
        teamCount : this.teamCount
    });

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {}

    createProject(){
        this.addProject.emit(Object.assign({}, this.projectForm.value));
        console.log(this.projectForm.value);
        this.projectForm.reset();
    }
}

من وقتی log میگیرم، وقتی داخل فرم، submit صورت میگیره، کاملا اطلاعات رو بدرستی از فرم میگیره و لاگ میکنه. ولی در push کردن مشکل وجود داره.
ممنون میشم راهنمایی کنید. تشکر

ثبت پرسش جدید

پاسخ‌ها

15
مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

چرا هیچ جا سوال های آدم رو پشتیبانی نمیکنه این سایت؟
نه تلگرام. نه داخل بحص و گفتگو!
فکر نمیکنم سوال هارو تکراری یا بد مطرح کرده باشم. ولی اصلا هیچ پاسخی دریافت نکردم تا حالا...حتی از استاد دوره ی انگولار

حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

سلام وقتتون بخیر سوالی که مطرح میکنید صبر داشته باشید تا جواب داده بشه .
در push چه مشکلی وجود داره ؟

شاید پاسخ شما همین‌جا باشد

مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

سلام @hesammousavi
push صورت نمیگیره. در صورتی که مطابق دوره ی شما پیادش کردم و میدونم که درسته دستورات شما
ولی حس میکنم یه مشکل خیلی کوچیکی وجود داره که متوجهش نیستم.

حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

هیچ اروری رو دریافت نمیکنید ؟

حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

    <div class="projectItem" *ngFor="let project of projects" (addProject)="addProject($event)">

این رو تست بفرمایید
در ضمن لطفا قدم به قدم با استفاده از console.log تست بگیرید که تا چه قسمتی اجرا میشه . با همین روش تست کنید که اصلا addProject اجرا میشه یا خیر

مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

خیر اروری دریافت نمیکنم
اتفاقا وقتی مثل دوره ی شما log میگیرم ، داخل کامپوننت new-project اطلاعات فرم رو کامل log میکنه برام
ولی همین اطلاعات به کامپوننت project ارسال نمیشه و به آیتم ها افزوده نمیشه

فکر میکنم از جایی که output صورت میگیره و ارتباط بین دو کامپوننت مشکل وجود داره

حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

بجای output هم این مورد رو قرار بدید

@Output() addProject: EventEmitter<any> = new EventEmitter();
مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

وقتی دکمه ی افزودن پروژه رو میزنم اینارو log میکنه :

id: ""
image: "C:\fakepath\insta-avatar-mahand.jpg"
name: "عنوان پروژه"
teamCount: 4
text: "توضیح پروژه"

ولی بازم چیزی اضافه نمیکنه به لیست
در تعجبم از اینکه output ها درست. توابع درست.push درست. چرا کار نمیکنه؟
همشو عین دوره ی شما امتحان کردم :((

مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

راستی من یادم رفت مدل خودم رو قرار بدم (newProjectForm.ts) :

export class newProjectForm{
    id : number;
    img : string;
    title : string;
    teamCount : number;
    description : string;
    category : string;

    constructor(values: Object = {}){
        Object.assign(this, values);
    }
}

احیانا مشکلم از این مدل من نیست؟ از این مدل برای پروژه ها استفاده میشه. بقیش داخل اولین سوالم هست

حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

آیا removeProject به درستی کار میکنه ؟

مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

بله remove به درستی کار میکنه.

مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

آیا من باید مدلم رو new کنم ؟

projects : newProjectForm[] = [];
حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

برای Manage کردن اطلاعات از Serviceها استفاده کنید
https://angular.io/start/data#services

حسام موسوی
حسام موسوی
@hesammousavi

تخصص: طراح و برنامه نویس

@mahdienezhadhoseini
زمانی که به push میرسه اروری دریافت نمیکنید ؟

مهدیه سادات نژادحسینی
مهدیه سادات نژادحسینی
@mahdienezhadhoseini

تخصص: Ui Ux Designer | Web Developer | Web Designer

چشم با سرویس ها هم امتحان میکنم
انشالله که درست بشه
اگر نشد دوباره مطرح میکنم سوالم رو


خیر اصلا هیچ اروری نمیده. آخه من وقتی دکمه ی افزودن پروژه هارو میزنم منو منتقل نمیکنه به صفحه پروژه ها.فقط همونجا لاگ میگیره. باید دستی روی منو کلیک کنم برم داخل صفحه . که کلا چیزی اضافه نمیکنه

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

ورود یا ثبت‌نام