Question

我找到了很多有关导航导航栏的指南和示例，但没有找到适合我的问题的导航栏和示例。我想构建某种动态响应式导航。目的是，如果导航栏缩小，则项目应动态移动到移动导航。因此，如果空间不足以显示所有项目，则应显示“隐藏一个”并将其显示在移动导航中。我被困在这种情况下。我使用jsfiddle构建了一个测试导航栏，以可视化我的方法。 https://jsfiddle.net/ms6L8c2n/

@Component({
    selector: '...',
    templateUrl: './order-form.component.html'
})
export class OrderFormComponent implements OnInit{

orderForm: FormGroup;
items: FormArray;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.orderForm = this.formBuilder.group({
    customerName: '',
    email: '',
    items: this.formBuilder.array([ this.createItem() ])
  });
}

createItem(): FormGroup {
  return this.formBuilder.group({
    name: '',
    description: '',
    price: ''
  });
}

addItem(): void {
  this.items = this.orderForm.get('items') as FormArray;
  this.items.push(this.createItem());
}

}

CSS：

...
<div formArrayName="items"
  *ngFor="let item of orderForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="name" placeholder="Item name">
    <input formControlName="description" placeholder="Item description">
    <input formControlName="price" placeholder="Item price">
  </div>

  Chosen name: {{ orderForm.controls.items.controls[i].controls.name.value }}
</div>
...

使用flexbox-wrap的响应式Nav

0 个答案: