国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Es ist nicht erforderlich, Observable zu abonnieren, eine zwingende M?glichkeit, reaktive Formulardaten in Angular zu bearbeiten

P粉587970021 2024-03-29 18:37:15

471

Hier ist der Prozess, den ich verwendet habe, um ein reaktives Formular basierend auf beobachtbaren Daten zu abonnieren und zu aktualisieren.

Vielleicht gibt es eine M?glichkeit, das Problem zu l?sen, ohne das Beobachtbare zu abonnieren und den Wert zu ?ndern.

@Component({
  selector: 'app-my-component',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="name" />
      <input formControlName="email" />
    </form>
  `,
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private ds: DataService) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      name: '',
      email: '',
    });

    ds.data$.subscribe((data) => {
      this.myForm.setValue({
        name: data.name,
        email: data.email,
      });
    });
  }


}

P粉587970021

Antworte allen(1)

P粉6048485882024-03-30 17:28:22 1 Etage

通常，消除訂閱的一種方法是在包裝器中使用異步管道

@Component({
  template: `<app-user-form-component *ngIf="user$ | async as user"  [user]="user"/>`,
  // closed tag is a new feature of angular
  selector: 'app-update-user-form-container'
}) 
class UpdateUserFormContainer {
  user$ = inject(DataService).data$;
}

表單本身可以在NgOnInit或NgOnChanges內(nèi)處理用戶更新（如果可能有多個更新，并且在這種情況下設(shè)置表單值很重要）

export class MyComponent implements OnInit {
  myForm = inject(NonNullableFormBuilder).group({
     name: '',
     email: '',
  }); // this way form is not just FormGroup but the type is inferred from fields
  // i.e. this.myForm.getRawValue() would return you {name: string, email: string};
  @Input({required: true}) user1: User; // required input is new feature of angular
  
  ngOnChanges(changes: SimpleChanges) {
    if('user' in changes) {
      this.myForm.setValue({
       name: this.user.name,
       email: this.user.email,
     })
    }
  }
}

注意：此示例中使用了一些非常前沿的Angular功能?？梢园凑障嗤哪Ｊ竭M行操作，但不一定需要使用每個功能