Question

由于某种原因，我无法将数据加载到输入表单中。我想我只是在监督某些事情或做错了什么。

这是我的html：

            <mat-form-field>
                <input matInput [(ngModel)]="name" placeholder="Folienname">
            </mat-form-field>

            <mat-form-field>
                <input matInput type="text" [(ngModel)]="text" placeholder="Nachricht">
            </mat-form-field>

            <mat-form-field>
                <mat-select [(value)]="color" placeholder="Schriftfarbe">
                    <mat-option value="#ffffff">White</mat-option>
                    <mat-option value="#bfbfbf">Lightgrey</mat-option>
                    <mat-option value="#808080">Grey</mat-option>
                </mat-select>
            </mat-form-field>

这是我的ts：

export class SlideEditorComponent implements OnInit {

  slides: Slide[];

  name: string = '';
  text: string = '';
  color: string = "#000000";

  constructor(
    private slideService: SlideService,
    private event: EventService
  ) {
    this.event.subscribe('edit-slide-data', (slide: Slide) => {
      this.updateValues(slide);
    });
  }

  ngOnInit() {
    this.slideService
      .getSlides()
      .subscribe((data: Slide[]) => {
        this.slides = data;
      })
  }

  onSaveSlide() {
    this.slideService.addSlide(
      this.name,
      this.text,
      this.color
    );
    this.name = '';
    this.text = '';
    this.color = "#000000";
  }

  updateValues(slide) {
    this.name = slide.name;
    this.text = slide.text;
    this.color = slide.colour;
  }
}

“ this.event.subscribe”只是组件之间进行通信的一种方式，我通过该服务从另一个组件解析幻灯片数据。当我记录数据时，似乎已对其进行了解析，但是以某种方式它并未出现在输入字段中……希望你们能为我提供帮助^^

Answer 1

您需要在输入中添加name属性以使其起作用：

 <input matInput name="someName" [(ngModel)]="name" placeholder="Folienname">

喜欢

            <mat-form-field>
                <input matInput name="name" [(ngModel)]="name" placeholder="Folienname">
            </mat-form-field>

            <mat-form-field>
                <input matInput name="text" type="text" [(ngModel)]="text" placeholder="Nachricht">
            </mat-form-field>

Answer 2

路由到组件并同时解析数据时出现问题。我无法真正解释它，因为我仅部分了解发生了什么，但这就是解决方法：

从这里：

this.event.publish('edit-slide-data', slide);
this.router.routeByUrl('some route');

对此：

this.router.routeByUrl('some route').then(() => {
this.event.publish('edit-slide-data', slide);
});

感谢您的时间！

将ngModel与Angular材质输入一起使用时，我做错了什么？

2 个答案: