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

- 5 روز پیش
مهدیه سادات نژادحسینی ( 1240 تجربه )
6 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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

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

فایل 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 کردن مشکل وجود داره.
ممنون میشم راهنمایی کنید. تشکر

مهدیه سادات نژادحسینی ( 1240 تجربه )
6 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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

حسام موسوی ( 166124 تجربه )
5 روز پیش
تخصص : طراح و برنامه نویس

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

مهدیه سادات نژادحسینی ( 1240 تجربه )
5 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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

حسام موسوی ( 166124 تجربه )
5 روز پیش
تخصص : طراح و برنامه نویس

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

حسام موسوی ( 166124 تجربه )
5 روز پیش
تخصص : طراح و برنامه نویس
    <div class="projectItem" *ngFor="let project of projects" (addProject)="addProject($event)">

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

مهدیه سادات نژادحسینی ( 1240 تجربه )
5 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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

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

حسام موسوی ( 166124 تجربه )
5 روز پیش
تخصص : طراح و برنامه نویس

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

@Output() addProject: EventEmitter<any> = new EventEmitter();
مهدیه سادات نژادحسینی ( 1240 تجربه )
5 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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

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

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

مهدیه سادات نژادحسینی ( 1240 تجربه )
5 روز پیش
تخصص : 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);
    }
}

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

حسام موسوی ( 166124 تجربه )
5 روز پیش
تخصص : طراح و برنامه نویس

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

مهدیه سادات نژادحسینی ( 1240 تجربه )
5 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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

مهدیه سادات نژادحسینی ( 1240 تجربه )
5 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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

projects : newProjectForm[] = [];
حسام موسوی ( 166124 تجربه )
5 روز پیش
تخصص : طراح و برنامه نویس

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

حسام موسوی ( 166124 تجربه )
5 روز پیش
تخصص : طراح و برنامه نویس

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

مهدیه سادات نژادحسینی ( 1240 تجربه )
5 روز پیش
تخصص : Ui Ux Designer | Web Developer | Web Designer

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


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

برای ارسال پاسخ باید وارد سایت شوید