Angular 5：ng-container內部的ngModel不顯示

Question

在視圖中，我以這種方式顯示了另一個組件：

<app-matrix-unit *ngIf="isSelectedUnit" [unit]="selectedUnit" [awards]="firstLevelAwards"></app-matrix-unit>

在app-matrix-unit組件內部，我有一個表單，其中包含以這種方式初始化的selectedUnit的多個字段：

    export class MatrixUnitComponent implements OnInit {


  @Input('unit')
  private unit: any;

  @Input('awards')
  private awards: any[];

  private types: any[] = ['REMISE', 'SUR_REMISE', 'COMMISSION', 'COMMISSION_ADDITIONNELLE'];

  private owners: any[] = [{key: "OWN", value: "Propre"}, {key: "TEAM", value: "Equipe"}];

  constructor() { }

  ngOnInit() {
  }

}

這是視圖：

<form name="unitForm">
        <fieldset>
            <div class="form-group">
                <label for="name">Type :</label>
                <select [(ngModel)]="unit.type" name="tye" class="custom-select">
                    <option *ngFor="let type of types" [selected]="unit.type == type" [ngValue]="type">{{type | camelCase}}</option>
                </select>           
            </div>
            <div class="form-group">
                <label for="firstName">Attribuée sur le CA généré par :</label>
                <select [(ngModel)]="unit.owner" name="owner" class="custom-select">
                    <option *ngFor="let owner of owners" [selected]="unit.owner == owner.key" [ngValue]="owner.key">{{owner.value | camelCase}}</option>
                </select>       
            </div>
            <div class="form-group">
                <label for="to">Attribué sur le CA au niveau :</label>
                <select [(ngModel)]="unit.to" name="to" class="custom-select">
                    <option *ngFor="let award of awards" [selected]="award == unit.to" [ngValue]="award">{{award.name | camelCase}}</option>
                </select>   
            </div>
            <div class="form-group">
                <label for="to">Attribué au niveau :</label>
                <select [(ngModel)]="unit.afor" name="afor" class="custom-select">
                    <option *ngFor="let award of awards" [selected]="award == unit.afor" [ngValue]="award">{{award.name | camelCase}}</option>
                </select>   
            </div>
            <div class="form-group">
                <label for="limit">Limite de CA :</label>
                <div class="row">
                    <div class="col-sm-2">
                        <input type="number" class="form-control small-input" name="limit" aria-describedby="limit-addon" [(ngModel)]="unit.limit" value="{{unit.limit}}">
                    </div> 
                    <div class="col-sm-2">€</div>
                </div>
            </div>

            <div class="form-group">
                <label for="limit">% de commission :</label>
                <div class="row"><div class="col-sm-2">
                    <input type="text" class="form-control small-input" name="limit" [(ngModel)]="unit.percentage" value="{{unit.percentage}}">
                </div>
                <div class="col-sm-2">%</div></div>
            </div> 


            <div class="form-group">
                <label for="limit">Eligible seul ?</label>
                <input type="checkbox" class="form-control" name="limit" [(ngModel)]="unit.alone">
            </div>


        </fieldset>
    </form>

一些字段呈現良好，但是例如，ngModel = unit.percentage的字段顯示輸入為“ false”。

在Chrome調試器中，這是元素：

<input _ngcontent-c5="" class="form-control small-input ng-untouched ng-pristine ng-valid" name="limit" type="text" ng-reflect-name="limit" **ng-reflect-model="8"**>

我不明白為什么它顯示出如此不一致的價值。 我還嘗試過從API重新加載對象，而不是通過組件聲明傳遞它，但是結果相同。

Answer 1

好的，工作不正常的字段具有錯誤的“名稱”屬性。 每個領域都有一個好人，行之有效