用Angular和PUT更新整个组件

Question

我想用put来更新一个Angular组件。

例如，我有以下HTML元素:

<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">Vendor</span>
<input type="text" class="form-control" placeholder={{this.data[1]}}
formControlName="vendorForm">
</div>

I emit the data to the father component with @Output. `this.event.emit(this.inputFormAllgInfo);`

我还实现了将数据传递给服务器的函数

public updateComponentDetails(identify: string, value: componentAttributes) {
return this.client
.put(this.appConf.apiBaseUrl + 'components/' + this.componentID, value)
.subscribe();
}

如何一次更新所有数据?

Answer 1

http客户端订阅方法有一个next和一个错误响应，如:

this.client.put("URL", data).subscribe({next: (data) => { // Your data}, err: (err) => { // The error})

第二部分(不需要客户端。这只是变更检测的一个例子)HTML部分

<div>
<button (click)="onClick()">CLICK ME</button>
<div *ngIf="isVisible">I'm the visible part!</div>
<div *ngIf="!isVisible" style="color: red;">Hey! What I doing here?</div>
</div>

背后的代码

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
isVisible: boolean = false;
onClick() {
this.isVisible = !this.isVisible;
}
}

所以你可以用这样的服务修改isVisible变量: 服务:

@Injectable({
providedIn: 'root',
})
export class MyService {
public getSomeData() {
return this.client.put("URL", data);
}
}

Back to Code Behind:

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
isVisible: boolean = false;
constructor(private myService: MyService) { // Don't forget to import it
}
onClick() {
this.myService.getSomeData().subscribe(
{ next: (data) => { this.isVisible = data; }, 
err: (err) => { // The error})
// this.isVisible = !this.isVisible;
}
}

这些都是基础知识。

Florian问候,