如何显示另一个组件的形式内的对象
如何显示另一个组件的形式内的对象
提问于 2019-08-16 14:51:46
这是一张这款应用的图片，你可以理解我在说什么：
因此，我正在尝试创建一个角度上的the应用程序，您可以在其中添加约会并显示约会数组。我这么做只是为了学习的原因
正如您在图像中所看到的，您可以在左边添加约会，并在右边看到列表。
现在，我想要做的是，当您点击列表中的enter按钮时，将约会对象传递给表单，但是我不知道该如何做。
我已经尝试过将表单组件(左)注入列表组件(右)，这样我就可以在按钮的(click)事件上直接传递它，这样就可以成功地记录约会，但它只是没有出现在表单中。
I‘，’，“我是个初学者，所以不要对我太苛刻
这是表单组件：
@Component({
selector: 'app-appointment-form',
templateUrl: './appointment-form.component.html',
styleUrls: ['./appointment-form.component.css']
})
export class AppointmentFormComponent implements OnInit {
form: FormGroup;
constructor(
private appointmentService: AppointmentService,
private fb: FormBuilder
) { }
ngOnInit() {
this.form = this.fb.group({
companyName: '',
notes: '',
date: '',
time: ''
})
}
onAddAppointment() {
this.appointmentService.addAppointment(this.form.value);
this.form = this.fb.group({
companyName: '',
notes: '',
date: '',
time: ''
})
}
onEditAppointment(i) {
this.form = this.fb.group(this.appointmentService.editAppointment(i));
this.form.controls['companyName'].setValue(this.appointmentService.editAppointment(i).companyName);
console.log(this.form.value);
}
}下面是它的html文件：
<form [formGroup]="form" (ngSubmit)="onAddAppointment()">
<h4 class="title">Add a new Appointment</h4>
<hr>
<h5 class="title">Company Name</h5>
<input class="textinput" formControlName="companyName" required>
<div class="sectionlarge">
<h5 class="title">Day of Arrival</h5>
<input class="textinput" placeholder="Month Day, Year" formControlName="date" required [(ngModel)]="form.date">
</div>
<div class="sectionsmall">
<h5 class="title">Time</h5>
<input class="textinput" placeholder="00:00" maxlength="5" formControlName="time" required>
</div>
<h5 class="title">Additional Notes</h5>
<textarea class="textinput" rows="4" formControlName="notes" required></textarea>
<hr>
<button class="submit" [disabled]="form.invalid">Submit</button>
</form>这是我的清单-组件：
@Component({
selector: 'app-appointment-list',
templateUrl: './appointment-list.component.html',
styleUrls: ['./appointment-list.component.css']
})
export class AppointmentListComponent implements OnInit {
appointments: Appointment[] = [];
@Output() passData: EventEmitter<string> = new EventEmitter<string>();
constructor(private appointmentService: AppointmentService,
private formcomponent: AppointmentFormComponent) { }
ngOnInit() {
this.appointments = this.appointmentService.getAppointments();
}
onEdit(i) {
this.formcomponent.onEditAppointment(i);
console.log("list component check");
}
onClick(i) {
this.passData.emit(i);
}
}当然，与其对应的html：
<h4 class="title">List of Appointments</h4>
<hr>
<div *ngFor="let appointment of appointments ; index as i">
<h5 class="title">{{ appointment.companyName }}<button class="edit" (click)="onEdit(i)">Edit</button></h5>
<div class="info">
<section>Time of arrival: <section class="float">{{ appointment.date }} | {{ appointment.time }}</section>
</section>
<section>{{ appointment.notes }}</section>
</div>
</div>还提供了服务editAppointment函数：
editAppointment(i) {
return this.appointments[i];
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-16 16:54:45
在您的AppointmentFormComponent上添加一个输入以获取数据，还可以修补您的表单以将该数据设置为您的表单，如下所示
export class AppointmentFormComponent implements OnInit, OnChanges {
@Input() appointment: Appointment;
form: FormGroup;
constructor(
private appointmentService: AppointmentService,
private fb: FormBuilder
) { }
ngOnInit() {
this.form = this.fb.group({
companyName: '',
notes: '',
date: '',
time: ''
});
this.patchForm();
}
ngOnChanges(changes: Record<keyof AppointmentFormComponent, SimpleChange>) {
if (changes.appointment && changes.appointment.currentValue) {
this.pacthForm();
}
}
patchForm() {
if (this.form && this.appointment) {
this.form.patchValue(this.appointment);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57526756
复制相关文章
相似问题
腾讯云开发者
