Angular-反应形式基于一个键值对定义多个选择

时间:2018-10-29 14:19:40

标签: angular typescript angular-reactive-forms angular-forms

我是Angular反应形式魔术的新手。我不太确定如何根据key(organizationId)生成两个不同的选择?

虚拟数据可以从Api中获得什么:

Popularimeter.Rating

我的结构:

// 构建表单,我认为问题出在这里,因为我仅使用一个表单控件来显示两个选择,我是否需要在这里使用FormArray生成1+是否根据按键选择?

import (
    "bytes"
    "encoding/binary"
    "errors"
    "fmt"

    id3 "github.com/mikkyang/id3-go"
)

func main() {

    f, _ := id3.Open("with_popm.mp3")
    popm := f.Frame("POPM")
    popularimeter, _ := FromData(popm.Bytes())
    fmt.Println(popularimeter)
}

type Rating uint8

func (r Rating) String() string {
    if r == 0 {
        return "unknown"
    }
    return fmt.Sprintf("%d/255", r)
}

type Popularimeter struct {
    Email   string
    Rating  Rating
    Counter uint32
}

func FromData(data []byte) (*Popularimeter, error) {

    tokens := bytes.SplitN(data, []byte{0x0}, 2)
    // Pupolarimeter: <string>, null, 1byte rating, 4bytes counter
    if len(tokens) != 2 || len(tokens[1]) != 5 {
        return nil, errors.New("invalid Popularimeter")
    }

    return &Popularimeter{
        Email:   string(tokens[0]),
        Rating:  Rating(tokens[1][0]),
        Counter: binary.BigEndian.Uint32(tokens[1][1:]),
    }, nil
}

// 为模板加载组织用户,调用API来获取信息

1: {
  Users: [
    {
      UserId: 3,
      FullName: 'Adam mc'
    },
    {
      UserId: 4,
      FullName: 'Peter mc'
    }
  ],
  OrganizationId: 1(the key)
},
2: {
  Users: [
    {
      UserId: 1,
      FullName: 'John mc'
    },
    {
      UserId: 2,
      FullName: 'Clade mc'
    }
  ],
  OrganizationId: 2(the key)
}

organizationalUsers $结构/映射 这并不是很完美,因为我的API结构如下: 不确定如何在Ts中定义相同的结构?

this.deleteForm = this.fb.group({
  organizationUser: [[], [Validators.required]],
});

我的模板

this.organizationUsers$ = this.userApi.getOrganizationUsers(this.userIds, this.organizationIds)
  .pipe(
    tap(result => console.log(result)),
      (error: string) => this.notification.error(error)
    )
  );

我不十分确定如何自动提交ATM,仅使用一个表单控件 organizationalUser从所有选择中提取 [value] =“ info.value.UserId” 值。

我试图做这样的事情:

From API:
1: {
  Users: [],
  OrganizationId: 1(the key)
}

TS:
export interface OrganizationUsersResponse {
  OrganizationId: number;
  Users: IUserItem[];
}

export interface IUserItem {
  UserId: number;
  FullName: string;
}

,但这只会获取最后一个onChange userId(value)。我是否需要为每个选择定义formArray?还是其他表单组?

Example

0 个答案:

没有答案