使用 Angular 和 PUT 更新整个组件

Question

I want to Update a Angular Component with put to the Server.

for example i have following html element.

<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);`

Also I implemented the function to pass the data to the server

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

How can I update all data at once?

Answer 1

A http client subscribe method has a next and a error response like:

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

Part two (Don't need a client. It's only a example for change detection) HTML Part

<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>

Code Behind

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

  onClick() {
    this.isVisible = !this.isVisible;
  }
}

So you can change the isVisible variable with the service like:

Service:

@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;
  }
}

So this all is basic knowledge.

Greetings, Florian