Как мне получить доступ к переменной внутри ng-контейнера с помощью ng-for для моего ngif?

Question

Я использую форму на основе шаблона.У меня есть NG-контейнер с NG-для создания радиокнопок.Как часть моей проверки, у меня есть имя переменной, которая проверяет ошибки.

Ниже приведен фрагмент моего кода:

    <div class="col-md-4">
        <ng-container *ngFor="let item of assetFormatOptions | wfsort">
            <ng-container *ngIf="!item['isHidden']">
                <div class="form-group form-group--inline">
                    <label class="radio">


<!--Created variable called assetFormat for validation purposes-->
                        <input type="radio" #assetFormat="ngModel" name="DE:Asset Format" value="{{item.value}}" ngModel required>
                        <span class="radio__input"></span>
                        <span class="radio__label hidden-xs">{{item.label}}</span>
                    </label>
                </div>
            </ng-container>
        </ng-container>


<!--trying to access variable above-->
        <div *ngIf="submitted && assetFormat.errors && (assetFormat.touched || submitted && !assetFormat.valid)" class="alert alert--danger">
            <span class="error">This field is required.  
                <span class="icon-chevron-up"></span>
           </span>
        </div>
    </div>

Эта цель - прочитать ngIf внизустатус радио кнопок.В этом случае будет 3 или 4 разных переключателя.

На данный момент ngIf не может читать переменные переключателя.Как получить переменную переключателя для моего ngIf?Я не хочу ngIf внутри моего цикла for.

Answer 1

Передайте вашу переменную как контекст в шаблон. попробуйте это

<div class="col-md-4">
        <ng-container *ngFor="let item of assetFormatOptions | wfsort">
           <ng-container *ngTemplateOutlet="itemContainer; context:{item:item}"></ng-container>
        </ng-container>


<!--trying to access variable above-->
        <div *ngIf="submitted && assetFormat.errors && (assetFormat.touched || submitted && !assetFormat.valid)" class="alert alert--danger">
            <span class="error">This field is required.  
                <span class="icon-chevron-up"></span>
           </span>
        </div>
    </div>

 <ng-template #itemContainer let-item="item" *ngIf="!item['isHidden']">
                <div class="form-group form-group--inline">
                    <label class="radio">


<!--Created variable called assetFormat for validation purposes-->
                        <input type="radio" #assetFormat="ngModel" name="DE:Asset Format" value="{{item.value}}" ngModel required>
                        <span class="radio__input"></span>
                        <span class="radio__label hidden-xs">{{item.label}}</span>
                    </label>
                </div>
            </ng-template>