Como obter o valor da caixa de seleção marcada dentro de ngFor/ngIf?

Quando você usa uma variável de referência de modelo dentro de um *ngFor(ou dentro de um @for) o "escopo" é relativo a este loop

O que significa isso? que você usa o "mesmo" nome de variável (no código checkBoxId)

<ng-container *ngFor="let item of list; let i = index;">
     <div class="grid">
           <mat-checkbox *ngIf="item.id > 4;" #checkBoxId
                         value="false"
                         type="checkbox">
           </mat-checkbox>
           <!-- you can use--->
           {{checkboxId.checked}}

           <mat-form-field *ngIf="item.id > 4 && checkBoxId.checked">
                 <input formControlName="{{item.name}}" matInput 
                     type="number"/>
            </mat-form-field>
</ng-container>
          

OBSERVAÇÃO: Ao usar ReactiveFormsControls, não use "value", apenas dê valor ao formControl.

Atualização Como indicado nos comentários (obrigado pelo conselho @Dozobus), há um problema quando o mat-check está sob um *ngIf. Podemos substituir o *ngIf por[style.display]="i<=4?'non':null"

ou usar

<form [formGroup]="form">
  <ng-container *ngFor="let control of  form.controls|keyvalue;let i=index" >
    <mat-form-field *ngIf="items[i].id<=4">
      <input matInput [formControlName]="items[i].name" />
    </mat-form-field><br/>
    <ng-container *ngIf="items[i].id>4">
      <section>
        <mat-checkbox class="example-margin" #checkinId>Check me!</mat-checkbox>
      </section>
      <mat-form-field *ngIf="checkinId.checked">
        <input matInput [formControlName]="items[i].name" />
      </mat-form-field>
    </ng-container>
  </ng-container>
</form>

NOTA: Ao enviar precisamos levar em conta esta caixa de seleção mat, podemos usar algumas como

//use ViewChildren to "reach" the checkboxes
@ViewChildren('checkinId') checkboxes!:QueryList<MatCheckbox>

submit()
{
    const data={...this.form.value}
    this.items.forEach((x:any,index:number)=>{
       if (x.id>4)
       {
         const checkBox=this.checkboxes.find((_,i:number)=>i==index-4) 
         if (checkBox && !checkBox.checked)
             data[x.name]=""
       }
    })
    ...do something with "data"
}

NOTA2: No stackblitz coloquei diferentes maneiras de gerenciar o problema usando o novo @fore@if

Você precisará armazenar os estados das caixas de seleção em uma matriz ou objeto e atualizar a visibilidade dos campos do formulário adequadamente.

 export class MyComponent {
      List: Array<{ id: number; name: string; checked?: boolean }> = [
        { id: 1, name: 'somename' },
        { id: 5, name: 'anothername' },
        // Add more items as needed
      ];
    
      // Tracks the state of checkboxes for items with id > 4
      checkboxStates: { [key: string]: boolean } = {};
    
      // Initialize checkboxStates with false values
      constructor() {
        this.List.forEach(item => {
          if (item.id > 4) {
            this.checkboxStates[item.name] = false; // Initial state unchecked
          }
        });
      }
    
      // Method to handle checkbox change
      onCheckboxChange(name: string, event: any) {
        this.checkboxStates[name] = event.checked;
      }
    }

No modelo, você usará o evento [(ngModel)] ou (change) do Angular para rastrear o estado das caixas de seleção e vincular a visibilidade do campo de formulário com base nesse estado.

<ng-container *ngFor="let item of List; let i = index;">
  <div class="grid">

    <mat-checkbox *ngIf="item.id > 4"
                  [(ngModel)]="checkboxStates[item.name]"
                  (change)="onCheckboxChange(item.name, $event)">
      {{ item.name }}
    </mat-checkbox>

    <mat-form-field *ngIf="item.id <= 4">
      <input formControlName="{{item.name}}" matInput type="number" />
    </mat-form-field>

    <mat-form-field *ngIf="item.id > 4 && checkboxStates[item.name]">
      <input formControlName="{{item.name}}" matInput type="number" />
    </mat-form-field>

  </div>
</ng-container>

Uma refatoração da minha resposta

bem, minha resposta anterior precisa em submit verificar os valores do checkbox. Podemos tirar vantagem que, quando um formControl está desabilitado o form.value omite esse formControl.

Então, primeiro faça uma diretiva desabilitada

@Directive({
  selector:'input[disabled]',
  standalone:true

})
export class DisabledDirective
{
  @Input('disabled') set _(value:boolean)
  {
    this.control && this.control.control && 
              this.control.control[value?'disable':'enable']()
  }
  constructor(@Optional() private control:NgControl){}
}

Isso é necessário porque precisamos usar os métodos disablee enablepara desabilitar/habilitar um formControl.

Gosto mais que o array "itens" tenha uma propriedade "opcional", então pode ser, por exemplo

items=[{id:1,name:'input1'},{id:2,name:'input2'},{id:3,name:'input3'},
       {id:4,name:'input4',optional:true},{id:5,name:'input5',optional:true}]

E criamos o formGroup como

form=new FormGroup(this.items.reduce((a:any,item:any)=>{
    a[item.name]=new FormControl({value:'',disabled:item.optional});
    return a
  },{}));

Bem, podemos ter um .html como (veja que desabilitamos o controle em vez de colocar sob um *ngIf

<form [formGroup]="form">
  <ng-container *ngFor="let control of  form.controls|keyvalue;let i=index" >
    <mat-form-field *ngIf="!items[i]?.optional">
      <input matInput [formControlName]="items[i].name" />
    </mat-form-field><br/>
    <ng-container *ngIf="items[i]?.optional">
      <section>
        <mat-checkbox class="example-margin" #checkinId>Check me!</mat-checkbox>
      </section>
      <mat-form-field >
        <input matInput [formControlName]="items[i].name" 
               [disabled]="!checkinId.checked"/>
      </mat-form-field>
    </ng-container>
  </ng-container>
</form>

A última peça do quebra-cabeça é adicionada em component.css

.mat-form-field-disabled{
  display: none;
}

um stackblitz