Ionic 使用@Input填充Angular表单,其中包含来自firebase数据库的数据和服务的数据

piv4azn7  于 11个月前  发布在  Ionic
关注(0)|答案(1)|浏览(138)

我一直在用Ionic Angular解决一个表单的问题,我有一个组件,它基本上是一个由输入(组件)填充的表单。
问题是,它似乎是它得到的形式,它得到了填充之前的数据得到的输入字段。该数据来自一个服务,这是inyect在父组件。我想显示的数据是来自服务,而不是组件中的对象。来自服务的数据是“杰克”,但它显示我“约翰”。
谢谢你,谢谢

HTML组件

<form [formGroup]="myForm">
    <ion-item button="true" detail="false">
      <ion-input  label="Name"
                  formControlName="userName"
                  placeholder="Enter Name"></ion-input>
    </ion-item>
</form>

字符串

组件:

export class EventoComponent  implements OnInit {

  @Input() users: Atencion[] = [{
    userName: 'John'
  }];

  public myForm: FormGroup = this.fb.group({
    userName: [this.users[0].userName]
  })

  constructor(private fb: FormBuilder) {}

}

父组件:

export class EventoPage implements OnInit {
  
  users: Atencion[] = [];
  

  constructor(private dataService: GetDataService) {}

  ngOnInit() {
    this.dataService.getUsersData()
      .subscribe( users => {
      this.users.push(users);
    });

  }

}


我正在尝试用一个输入来填充表单,这个输入以前是由一个服务填充的

0s0u357o

0s0u357o1#

在input中使用setter。

public myForm!:FormGroup
public users:Atencion[] //<--see if really you need
@Input('users') set _users(value:Atencion[]){
    this.users=value;
    this.myForm= this.fb.group({
       userName: [value[0].userName]
    });
}

字符串
或者,在setter中使用setValue

users: Atencion[] = [{
    userName: 'John'
  }];

  public myForm: FormGroup = this.fb.group({
    userName: [this.users[0].userName]
  })

    @Input('users') set _users(value:Atencion[]){
        this.users=value;
        this.myForm.controls.userName.setValue(value[0].userName)
        });
    }

相关问题