相关疑难解决方法(0)

我创建了一个自定义组件,我放在一个for循环中,例如

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

其输出将是:

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

我想知道当这些组件的数量可以变化时,如何使用@viewchild语法或任何其他方法来获取对这些组件的引用

当组件可以给出一个名称,例如

<customcomponent #compID></customcomponent>

我可以参考如下:

@ViewChild('compID') test: CustomComponent

如果不是这种情况,我如何引用它,例如可能使用索引？

(此问题与使用ElementRef无关,因为之前已经提到的其他问题可以通过下面列出的答案看到)此问题涉及访问多个@ViewChild和使用列表查询.

我使用angular中的复选框来选择多个数据并且我试图在表单上获取复选框的值.相反,获取值im得到的值为true.我试过以下代码帮我提前谢谢

   export class CreatesessionComponent implements OnInit {    
      form : FormGroup ;
      constructor(private formBuilder: FormBuilder) {       
      }        
      ngOnInit() {
       this.form = this.formBuilder.group({     
          useremail :  new FormArray([
            new FormControl('',Validators.required)
          ])    
      });
    }
  }

userdata是动态数组,我将从数据库中获取

<div class = "row" formArrayName="useremail; let k = index">
   <div class="col-md-8 col-sm-5 col-xs-12 col-lg-8">
       <div *ngFor="let data of userdata">
           <div class="col-md-6">
               <input type="checkbox" name="useremail" formControlName ="{{k}}" [value]="data.email">{{data.email}}
           </div>
       </div>
   </div>
</div> 

对于带有绑定到FormControl的字符串值的简单复选框:

export class CheckboxComponent {
  formControl: FormControl;
  option: {value: string};

  constructor() {
    this.formControl = new FormControl(); 
    this.option = {value: "MyValue"};

         this.formControl.valueChanges.subscribe(console.log);
  }

}

<input type="checkbox" [formControl]="formControl" [value]="option.value" name="SomeName" />

subscribe的输出是true,false,true,false ....我希望angular 2绑定FormControl中的字符串值"MyValue".

默认情况下,角度2,FormControl和复选框似乎绑定布尔值,这是奇怪的,因为默认浏览器提交行为是发送复选框的值,并且在多个具有相同名称的复选框的情况下,绑定到的复选框值的数组复选框的名称.

提交将毫无用处:

Items=[true, false, true, true, true, false]

代替:

Items=[Toothbrush, Floss, Glock, Clean underwear]

所以本质上:如何使angular 2绑定字符串值而不是布尔值？

亲切的问候,

我不确定绑定和更新动态生成复选框的模型的正确方法.(这是一个最初使用Yeoman生成器创建的Angular 2的ASP.NET Core项目)或者我刚刚发现的一个简单的复选框.

下面是剥离代码,它有一个设施和时间段.每个设施可以有多个时隙.时间段复选框列表显示正常.初始数据表明只应检查一个时隙.但是当我加载一个设施时,所有的时间段都会被检查.它们没有像我预期的那样与ngModel绑定.

1. 如何修复它,以便只检查设施数据中包含的时隙而不是全部？
2. 如何将检查的内容绑定到ngModel timeslotids属性？我是否需要在组件上创建一个数组属性并操纵它而不是依赖于ngModel？(试过这个,但显然没有做到这一点,所以回到下面的代码)
3. 我似乎也有一个问题绑定到一个简单的复选框(haselectric),因为这也不是应该检查的时候.我错过了一个能解决所有问题的导入吗？

代码说明我有两个来自api的对象(设施和时间段),我绑定到接口.为简单起见,它们的属性显着降低:

export interface IFacility {   
   id: number,
   name: string,
   haselectric: boolean, 
   timeslotids: number[],    
   timeslots: ITimeslot[]

}
export interface ITimeslot {
    id: number,
    timeslotname: string    
}

这是Timeslots的JSON数据:

[{"id":1,"timeslotname":"Daily"},{"id":2,"timeslotname":"Hourly"},{"id":4,"timeslotname":"Market"}]

这是在更新之前单个Facility的JSON数据:

{"id":2,"name":"Clements Building","haselectric":true,"timeslotids":[1],"timeslots":[{"id":1,"timeslotname":"Daily"}]}

用于编辑设施的组件(facility.component.html):

<form #form="ngForm" (ngSubmit)="submitForm()" *ngIf="formactive">
   <input type="hidden" [(ngModel)]="updatedfacility.id" #id="ngModel" name="id" />
    <div class="form-group">
         <label for="name">Facility Name *</label>
         <input type="text" class="form-control input-lg" [(ngModel)]="updatedfacility.name" #name="ngModel" name="name" placeholder="Facility Name *">
   </div>
   <div class="form-group">
                    <label for="exhibitspaces">Has Electric *</label>
                    <input type="checkbox" class="form-control input-lg" [(ngModel)]="updatedfacility.haselecric" #haselectric="ngModel" name="haselectric">
    </div> …

我想从我的复选框中获取值,但我只能得到真或假.

这是我的模板:

<h4>Categories</h4>
<div class="form-check" *ngFor="let cat of categories$|async">
    <input class="form-check-input" [(ngModel)]="cat.id" name="{{ cat.name }}" type="checkbox" id="{{cat.name}}">
    <label class="form-check-label" for="{{cat.name}}">
        {{cat.name}}
    </label>
</div>

这是我的组件

this.categories$ = this.storeService.getAllCategories().pipe(
    map(result => (result as any).data),
    tap(r => console.log(r))
)

我的组件基本上从外部api获取类别列表

在阅读了与该主题相关的多个主题之后，我正在写这篇文章，但是没有人给我我所需要的。这篇文章似乎有解决方案，但我不必从json中读取已检查的值。

我需要做的是：

1. 从一系列对象中读取国家
2. 创建一个代表每个国家的复选框的清单

3. 用户应选中并取消选中每个复选框

   奖金：

   • 获取检查的输入的值并将其发送到组件外部

   我知道这可能确实很愚蠢，但是直到现在我所要做的就是拥有一系列不可检查的复选框，仅此而已。

这是代码：模板：

<div class="form-group">
    <div *ngFor="let country of countries">
        <input type="checkbox"
                  name="countries"
                  value="{{country.id}}"
                  [(ngModel)]="country"/>

        <label>{{country.name}}</label>
    </div>
</div>

和TS：

countries = [
    {id: 1, name: 'Italia'},
    {id: 2, name: 'Brasile'},
    {id: 3, name: 'Florida'},
    {id: 4, name: 'Spagna'},
    {id: 5, name: 'Santo Domingo'},
]

我试图使用反应形式，但这给了我更多的问题，然后是模板驱动的（肯定是因为我的实现不好）。拜托，帮帮我，我不知道该撞到哪里了