Сохранить форму профиля — AngularCSS

Разбираемся в CSS
Ответить
Гость
 Сохранить форму профиля — Angular

Сообщение Гость »

У меня есть компонент профиля и деталь профиля. Я хотел бы сохранить дату (после нажатия кнопки) из формы профиля на карточку в деталях профиля.
Это форма моего профиля:

Профиль Фото Продолжение А у меня есть вот это, тс. ТС:

import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; импортировать { ProfileService } из '../services/profile.service'; импортировать { AngularFirestore } из '@angular/fire/compat/firestore'; импортировать { AngularFireStorage } из '@angular/fire/compat/storage'; import { ActivatedRoute, Router } из '@angular/router'; импортировать { FormBuilder, FormGroup } из '@angular/forms'; @Компонент({ селектор: 'профиль приложения', templateUrl: './profilo.comComponent.html', styleUrls: ['./profilo.comComponent.css'] }) класс экспорта ProfiloComponent { @ViewChild('inputName') inputName: любой; @ViewChild('inputDescription') inputDescription: любой; @ViewChild('inputEmail') inputEmail: любой; @ViewChild('inputTelefono') inputTelefono: любой; @ViewChild('inputCompetenze') inputCompetenze: любой; @ViewChild('inputInteressi') inputInteressi: любой; @ViewChild('inputLinkedIn') inputLinkedIn: любой; @ViewChild('inputTelegram') inputTelegram: любой; @ViewChild('inputInstagram') inputInstagram: любой; @Output() dataSaved = новый EventEmitter(); userImageUrl: строка | ноль = ноль; профильФорма: Группа форм; конструктор( частный профильService: ProfileService, частный пожарный магазин: AngularFirestore, личное хранилище: AngularFireStorage, частный маршрут: ActivatedRoute, частный маршрутизатор: Маршрутизатор, частный formBuilder: FormBuilder, ) { this.profileForm = this.formBuilder.group({ name: [''], // Инициализация с предопределенным значением, которое необходимо электронная почта: [''], // Другие кампи-дель-формы }); } ngOnInit(): пустота { // Восстановление данных профиля на маршруте const state = this.route.snapshot.paramMap.get('state'); если (состояние) { const ProfileData = JSON.parse(state); this.inputName.nativeElement.value = ProfileData.name; this.inputDescription.nativeElement.value = ProfileData.description; this.inputEmail.nativeElement.value = ProfileData.email; this.inputTelefono.nativeElement.value = ProfileData.telefono; this.inputCompetenze.nativeElement.value = ProfileData.competenze.join(', '); this.inputInteressi.nativeElement.value = ProfileData.interesti.join(', '); this.inputLinkedIn.nativeElement.value = ProfileData.linkedin; this.inputTelegram.nativeElement.value = ProfileData.telegram; this.inputInstagram.nativeElement.value = ProfileData.instagram; this.userImageUrl = ProfileData.imageUrl; } } onContinueClick() { константные данные = { имя: this.inputName.nativeElement.value, описание: this.inputDescription.nativeElement.value, электронная почта: this.inputEmail.nativeElement.value, телефоно: this.inputTelefono.nativeElement.value, компетенция: this.inputCompetenze.nativeElement.value, интерес: this.inputInteressi.nativeElement.value, linkedin: this.inputLinkedIn.nativeElement.value, телеграмма: this.inputTelegram.nativeElement.value, Instagram: this.inputInstagram.nativeElement.value, imageUrl: this.userImageUrl, }; this.profileService.updateProfileData(данные); const competenzeArray = data.competenze.split(',').map(skill => навык.trim()); const interessiArray = data.interesti.split(',').map(interest =>interest.trim()); this.firestore.collection('utenti', ref => ref.where('email', '==', data.email)).get().subscribe((querySnapshot) => { если (querySnapshot.size > 0) { constexistUser = querySnapshot.docs[0]; существующийUser.ref.update({ имя: данные.имя, описание: данные.описание, телефон: data.telefono, компетенция: compenzeArray, интерес: interessiArray, связанный: данные.linkedin, телеграмма: data.telegram, инстаграм: data.instagram, imageUrl: data.imageUrl, }).then(() => { console.log('Данные об успешном обновлении профиля в Firestore.'); this.dataSaved.emit(); }); } еще { this.firestore.collection('utenti').add({ имя: данные.имя, описание: данные.описание, электронная почта: data.email, телефон: data.telefono, компетенция: compenzeArray, интерес: interessiArray, imageUrl: data.imageUrl, }).then(() => { console.log('Новое добавление к успеху в Firestore.'); this.dataSaved.emit(); }); } }); const formData = this.profileForm.value; } onFileSelected (событие: любое) { константный файл: Файл = event.target.files[0]; const uniqueName = новая дата().getTime() + '_' + file.name; const StorageRef = this.storage.ref('/images/' + uniqueName); const uploadTask = StorageRef.put (файл); uploadTask.then((снимок) => { StorageRef.getDownloadURL().subscribe((url) => { this.userImageUrl = URL; }); }); } } Я бы сохранил текст, который добавил в этой форме (после нажатия кнопки), на карточке во втором компоненте. деталь профиля: html:

{{profileData.name }} Интерес:
  • {{interest }}

Компетентность:
  • {{ навык }}

Электронная почта: {{ ProfileData.email }}

Телефон: {{ ProfileData.telefono }}

тс:

import { Component, OnInit } из '@angular/core'; импортировать { ProfileService } из '../services/profile.service'; @Компонент({ селектор: 'app-profile-detail', templateUrl: './profile-detail.comComponent.html', styleUrls: ['./profile-detail.comComponent.css'] }) класс экспорта ProfileDetailComponent реализует OnInit { Данные профиля: любые; // Данные профиля для визуализации карты конструктор (частный профильService: ProfileService) {} ngOnInit(): пустота { // Восстановление данных по профилю предоставляемых услуг this.profileService.profileData$.subscribe((данные) => { this.profileData = данные; }); } } Вы можете мне помочь? Спасибо.
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»