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

好的，那些效果不佳的田地有错误的名字＆＃34;属性。每个领域都有一个好的，效果很好

Angular 5：ng-container中的ngModel不显示

1 个答案: