bruce's questions

情况如下：我有一个具有这种结构的组件：

<app>
 <ng-container *ngIf="flag">
  <component-one> </component-one>
  <component-two> </component-two>
  <component-three> </component-three>
 </ng-container>
</app> 

有一个服务（serviceGeneral）包含一个通用表单（ formgroup ）。

在 app 组件中，在某个方法中，将flag更改为 true。将标志更改为 true 后，相应地呈现组件（*ngIf 变为 true）。每个组件初始化的时候，对应的formgroup被添加到大表单的通用服务中（即component-one组件初始化时，该组件的formgroup字段被添加到通用表单中）。将 flag 标志更改为 true 后，我指定serviceGeneral表单的逻辑。

问题：更改标志后，组件尚未呈现（由于尚未将新字段添加到整个表单中），因此我无法处理表单。

解决方案：更改标志后将您的逻辑包装在 setTimeout() 中。

问题：有没有更优雅的方法来解决我的问题？没有 setTimeout ？或者这是最好的解决方案？

method() {
 this.flag = true;
 let groups = this.generalFormService.form;
 ...
}

我的决定：

method() {
 this.flag = true;
 setTimeout( () => {
   let groups = this.generalFormService.form;
 }, 0);
 ...
}

我有一个包含两个组件的主要组件：headerTable、rowTable。
在 headerTable 中，我有表格列的名称，并且有一个复选框，选中后，将选择 rowTable 中的所有行（反之亦然）。rowTable 也有一个复选框（仅此复选框将突出显示以进行行选择）。我想制作以下脚本：

1. 单击所有行的选择（在 headerTable 中单击复选框），然后从选择中删除一些行。
2. 在我删除某行中的复选框后，应该删除 headerTable 中的复选框。

我尝试使用 Input 装饰器来做到这一点，但显然，因为不同的上下文，输入不起作用。

@Component({
  selector: 'headerTable',
  template: '<input type="checkbox" [ngModel]="allItems" (ngModelChange)=onChange($event)>'
})
export class HeaderComponent {
  @Input() allItems: boolean;
  onChange(flag: boolean) {
    this.allItems = flag;
  }
}
...
@Component({
  selector: 'row',
  template: '<input type="checkbox" (change)="onChange($event)">'
})
export class RowComponent {
  @Output() checkedItem = new EventEmitter<number>();
  onChange(flag: boolean) {
    this.checkedItem.emit(5);
  }
}
...

page.html：

<headerTable [allItems]="allItems"></headerTable>
<row (checkedItem)="checkedItem($event)"></row>

page.ts：

  checkedItem(id: number) {
    this.allItems = false;
  }

有一个模型：

export class People {
  address: string;
  document: {
    number: string;
    serial: string;
    lastName: string;
  };
  ...
  ctor
  ...
  get serialNumber() {
    return this.document.serial || '' + ' ' + this.document.number;
  }
  set serialNumber(value) {
    console.log('значения', value);
    const [serial, number] = value.split('');
    this.document.serial = serial;
    this.document.number = number;
  }
}

有一个表单组件（PeopleForm）：

this.people = new People();
this.peopleForm = new FormGroup({
      address: new FormControl(this.people.address, []),
      document: new FormGroup({
        lastName: new FormControl(this.people.document.lastName, []),
        serialNumber: new FormControl(this.people.serialNumber, []),
        license: new FormControl(this.people.document.license, [])
      })
});

从模型中可以看出，我在文档中有两个属性： serial，number。我希望这两个属性以单一名称serialNumber的形式出现（抛出某种掩码）。我在模型中创建了一个 get/set，但是，唉，由于某种原因它不起作用。

告诉我如何解决问题任务？

每个页面都有多个获取请求。比如我有4个get请求获取数据（first、second、third、fourh），我知道first、second指的是“firstPage”路由下的页面，第三、第四——指的是“secondPage”下的页面“路线。我不想一次发出所有的 get 请求（也就是说，如果我通过 secondPage 路由，我想获取它的数据）。

{
 firstPage: {
  one: [],
  two: []
 },
 secondPage: {
  three: [],
  four: []
 }
}

在哪里或如何放置所有页面的这个单一公共对象，以便我可以在任何组件中找出特定页面中的数组（即，通过引用 secondPage 对象的字段，我的 ide 可以告诉我有里面有两个数组）？

我正在尝试将默认类更改为公共/私有引导手风琴（ngx 引导手风琴）。我的实现中的问题是我没有绑定到数组的每个元素对象，因此，当打开其中一个元素的手风琴时，每个人的 css 类都会发生变化。

<div *ngFor="let item of data">
 <accordion>
  <accordion-group [panelClass]="{'active':isOpen, 'passive':!isOpen}" (isOpenChange)="isOpenChange($event)">
   <span accordion-heading class="accordion-header">
    {{item.title}}
   </span>
   <div>{{item.description}} </div>
  </accordion-group>
 </accordion>
</div>

@Component({...})
Class CustomAccrodion {
isOpen: boolean = false;
 data = [
  { title: 'first', description: 'first text' },
  { title: 'second', description: 'first text' },
  { title: 'third', description: 'first text' },
 ];
 ...
 isOpenChange(open: boolean) {
  this.isOpen = open;
 }
}

我想创建自己的分页器（作为输入的页数，这个组件应该输出当前页面作为输出）。我想在循环中显示列表并设置使用 ngClass 选择主动/被动类的条件。但是如何在angular中做一个循环（即*ngFor遍历一个数组，但必须是从0到N）。以及在选择主动/被动类时要依靠什么，要做什么标志？

<ul>
<li *ngFor="как-то 0 to N" ngClass = "{'active': '!какой-нибудьФлаг', 'passive': 'какой-нибудьФлаг'}"> </li>
</ul>

告诉我如何实现（mb我的想法，最重要的是不使用现成的库 - bootsrap 等？