Question

父组件中有一些对象：

<div *ngFor="let sticker of stickers"
routerLink="sticker-details/{{sticker.id}}">
    <h3>{{sticker.title}}</h3>
    <p>{{sticker.content}}</p>
</div>

还有按钮：

<button (click)="add(sticker)">
</button>

当我单击此按钮时，它只会创建新的空对象并将其添加到数组中。然后，当我单击此对象时，它会打开一个子组件读取模板，我必须单击编辑按钮才能显示编辑模板。这是子组件模板：

<div *ngIf="readTemp">
<button (click)="edit()"></button>
<button (click)="delete()"></button>
...
</div>

<div *ngIf="!readTemp">
<button (click)="cancel()"></button>
<button (click)="save()"></button>
...
</div>

父母的组件方法：

add(sticker: Sticker): void {
            this.stickService.addSticker({sticker} as Sticker)
              .subscribe(sticker => {
                this.stickers.push(sticker);
    }
}

如何使添加按钮加载编辑模板并在数组中添加新对象？我试过路由，它不起作用。

Answer 1

根据您现有的代码判断，这可能会有效：

add(sticker: Sticker): void {
    this.stickService.addSticker({sticker} as Sticker)
      .subscribe(sticker => {
        this.stickers.push(sticker);
        this.readTemp = sticker;
     }
}

我假设您的父级（add()方法所在的位置）具有readTemp属性，然后绑定到子组件的输入。

如果你不需要等待服务确认添加它，你可以在致电this.readTemp = sticker之前更早地坚持stickService。

角。父按钮应导航到其中一个孩子的模板

1 个答案: