Question

我正在尝试重写使用三个硬编码复选框的Angular 5中编写的部分代码，以便根据我从后端获得的对象数量动态创建它们。

在模板中有：

<div class="row">
    <div class="col-md-3">
        <label class="control-label">Options 1</label>
        <input type="checkbox" id="option1" name="option1" [value]="true" [(ngModel)]="context.option1"
               (change)="context.option1 = !context.option1"/>
    </div>
     <div class="col-md-3">
        <label class="control-label">Options 2</label>
        <input type="checkbox" id="option2" name="option2" [value]="false" [checked]="context.option2"
               (change)="context.option2 = !context.option2"/>
     </div>
     <div class="col-md-3">
        <label class="control-label">Options 3</label>
        <input type="checkbox" id="option3" name="option3" [value]="false" [checked]="context.option3"
               (change)="context.option3 = !context.option3"/>
     </div>
</div>

和模型（摘录）：

export class SomeClass {
    public company: string;
    ...
    public option3: boolean = false;
    public option2: boolean = false;
    public option1: boolean = false;
    ...

    constructor(company: string) {
        this.company = company;
        ...
    }
}

现在我重写了这样：模板：

<div class="row">
    <div class="col-md-3" *ngFor="let option of this.context.someClassWithBean.someBean; let i = index">
        <label class="control-label">Options {{i}}</label>
        <input type="checkbox" id="option{{i}}" name="option{{i}}" [value]="true" [(ngModel)]="context.options[i]"
               (change)="context.options[i] = !context.options[i]"/>
    </div>
</div>

和模型（摘录）：

export class SomeClass {
    public company: string;
    ...
    public options: boolean [];
    ...

    constructor(company: string) {
        this.company = company;
        ...
    }
}

当然我有问题。代码不输出Option（选项0，选项1 ......）的索引，如果我从(change)="context.options[i] = !context.options[i]删除[i]，那么它会写入选项1等，但我怀疑它是否正常工作不是数组的索引。最重要的是我

＆＃34;错误类型错误：无法读取属性＆＃39; 0＆＃39;未定义＆＃34;

两种情况。而且我不确定这是否是正确的方法。

有什么建议吗？

Answer 1

为了便于参考，以下是解决方案：在模型中，我不得不初始化数组：

 @Override
 public void onAttach(Context context) {
    super.onAttach(context);
    if (context instanceof ObjectSender) {
        obj = (ObjectSender) context; //Reference to activity
    } else {
        throw new RuntimeException(context.toString()
                    + " must implement ObjectSender");
    }
}

@Override
public void onDetach() {
    super.onDetach();
    obj = null;
}

@Override
public void onResume(){
   super.onResume();
   text= (EditText) getActivity().findViewById(R.id.editText2);
   text2=(EditText) getActivity().findViewById(R.id.editText3);
   text3=(EditText) getActivity().findViewById(R.id.editText4);
   bottone1= (Button) getActivity().findViewById(R.id.button);

   bottone1.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
           segnalazione.setNome(text2.getText().toString());
           segnalazione.setCognome(text3.getText().toString());
           obj.sender(segnalazione);
       }
   });
}

然后在组件中我必须添加：

public options: boolean[] = [];

使用* ngFor

1 个答案: