是否可以在Angular中动态更改变量的名称?

是否可以在Angular中动态更改变量的名称?,angular,typescript,Angular,Typescript,我有一个分量,其中有另一个角分量 <div *ngFor="let locs of nhsnLocationCodeType;let i=index"> <div class="floatLeft gray-Box" *ngIf="locs.code !=''"> <div class="floatLeft paddingL" style="width:

我有一个分量,其中有另一个角分量

<div *ngFor="let locs of nhsnLocationCodeType;let i=index">
    <div class="floatLeft gray-Box" *ngIf="locs.code !=''">
        <div class="floatLeft paddingL" style="width: 16%;">
            <label class="location-type-label">
                {{locs.code}} (<span *ngFor="let l of locs.location; last as islast">
                {{locs.code}}{{l}}<span *ngIf="!islast">,</span>
            </span>)
                <p class="selectDate">
                    {{ selectedDateOP | date:"MMM yyyy" | uppercase}}
                </p>
            </label>
        </div>
        <div class="floatLeft paddingL" style="width: 26%;">
            <div class="gray-Box-row">
                <div class="floatLeft facwide-days-labels">
                    <span *ngIf="locs.locType == 'display'">24 hour Oberservation</span>
                    <span *ngIf="locs.locType == 'Emergency'">Emergency</span>
                    <span *ngIf="locs.locType == 'Pediatric Emergency'">Pediatric Emergency</span>
                    <br>Outpatient Encounters
                </div>
                <div class="floatLeft facwide-days-textbox-div">
                    <input id="opEncounters{{i}}"
                           class="facwide-days-textbox record-input"
                           #opEncounters
                           maxlength="5"

                    >
                </div>
            </div>
        </div>
        <!-- <app-noevent></app-noevent>-->
        <app-noevent id="noEvent{{i}}" [specimen]="specimenTypeOrganismStatus" (isEdited)="setEditSat($event)" (notifyAccess)="setAccessStatus($event)"></app-noevent>

    </div>
    <div class="floatLeft paddingL" style="width: 6%;">&nbsp;</div>
</div>
应用程序noevent的ts文件为

 specimenTypeOrganism = {
        mrsa_AllSpecimens: false,
        mrsa_BloodOnly: false,
        };
    @Input() specimen;


我在父组件中有一个变量,例如specimenOrganismType,它在app noevent中使用。app noevent有一些复选框,因此如果我单击任何一个div元素中的复选框,所有div元素中的相同复选框都会被选中。请告诉我如何解决这个问题。

这可能比您想要的更复杂,但这应该是最首选的方法。从高层创建表单,并在该表单中嵌套表单数组。表单控件被分配给数组的每个“第i个”索引。因此,控件由用户及其相应的值动态控制。见斯塔克闪电战

在这个实例中,动态变量名实际上是控件。其中,表单控件的每个实例都指定给i的值

//Child TS file
//This is how you emit your form back to your parent
@Output() sendToParent: EventEmitter<any> = new EventEmitter<any>();

//initialization of the form
form: FormGroup = this.fb.group({
     formArray = this.fb.array([])
})

items = [
{
    mrsa_AllSpecimens: false,
    mrsa_BloodOnly: true,
}
];

ngOninit() {
this.pushValuesOntoArray() //This is arbitrarily pushing true/false values. This can be anything.
}

pushValuesOntoArray() {
this.items.forEach(value => {
  console.log(value?.mrsa_AllSpecimens)
  this.formArray.push(this.fb.control(value?.mrsa_AllSpecimens))
  this.formArray.push(this.fb.control(value?.mrsa_BloodOnly))
})


sendFormToParent() {
    this.sendToParent.emit(this.form)
  }

//child HTML
<button (click)="sendFormToParent()">Send the form</button>

//parent HTML
<child (sendToParent)="handleChildForm($event)"></child>

//parent TS
handleChildForm(form: FormGroup) {
let formArray = form.get('formArray') as FormArray
formArray.controls.forEach((controlItem, i) => {
  console.log('variable name ' + i)
  console.log('value ' + controlItem.value)
})
//子TS文件
//这就是将表单发送回父级的方式
@Output()sendToParent:EventEmitter

将表单发送回父级后,您可以在控制台中看到formGroup->formArray中的每个控件都等于初始数组的第i个值。因此,您的变量名将分别位于父级0和1中


关键是:mrsa_all/mrsa_血液始终存在于每次GET呼叫中,还是有时不存在?或者有时钥匙会比这多吗?如果是这样,您必须检查该密钥是否存在

显示更多代码请添加stackblitz。。。我来解决你的问题你的问题标题似乎与你在问题本身中提出的不同。。因此,如果父元素只有一个变量名,那么循环中的所有子元素都将获得相同的变量名。若这不是您想要的,那个么您需要一些可以传入的项目的var。如果单个子级中的某个操作需要导致其他子级中的更改,您可以从您的子级中输出一个事件,在父级中捕获该事件并将其传递回所有子级。您可以演示如何在“我传递”项上使用var吗?您好,programoholic,我正在添加复制此问题的stackblitz。如果您在此处添加代码,您的答案会更好。谢谢您的回答,让我尝试使用它。@Owen Kelvin谢谢提示,我会这样做。@vishnu,我已更新stackblitz。如果您还有问题,请告诉我。谢谢
//Child TS file
//This is how you emit your form back to your parent
@Output() sendToParent: EventEmitter<any> = new EventEmitter<any>();

//initialization of the form
form: FormGroup = this.fb.group({
     formArray = this.fb.array([])
})

items = [
{
    mrsa_AllSpecimens: false,
    mrsa_BloodOnly: true,
}
];

ngOninit() {
this.pushValuesOntoArray() //This is arbitrarily pushing true/false values. This can be anything.
}

pushValuesOntoArray() {
this.items.forEach(value => {
  console.log(value?.mrsa_AllSpecimens)
  this.formArray.push(this.fb.control(value?.mrsa_AllSpecimens))
  this.formArray.push(this.fb.control(value?.mrsa_BloodOnly))
})


sendFormToParent() {
    this.sendToParent.emit(this.form)
  }

//child HTML
<button (click)="sendFormToParent()">Send the form</button>

//parent HTML
<child (sendToParent)="handleChildForm($event)"></child>

//parent TS
handleChildForm(form: FormGroup) {
let formArray = form.get('formArray') as FormArray
formArray.controls.forEach((controlItem, i) => {
  console.log('variable name ' + i)
  console.log('value ' + controlItem.value)
})