<div [style.height.px]="blockHeight"></div>
blockHeight
- переменная компонента[style.height.px]="calculateHeight()"
, но так делать не стоит т.к. функция будет вызываться каждый раз при change detection. Лучше тогда сделать pipe который значение будет вычислять от какой то изначальной велечины, либо directive сделать, которая будет задавать высоту для блоков. this.http.get('api/namesurname')
.pipe(
map((resp) => resp.data.map(item => new NameSurName(item)),
}
.subscribe((resp) => {
this.nameSurName = resp.data // {name: 'Вася'}
})
export class NameSurName {
name: string;
surname: string = 'Иванов'
constructor(props: Partial<NameSurName >) {
Object.assign(this, props);
}
@Input
который передает список объектов для отображения, только написано неправильно - нужно обернуть в квадратные скобки.@Output
, соответственно. changeDetection: ChangeDetectionStrategy.OnPush
?this.sensors = [{}, {}]
, то ссылаетесь но новый список, а при измнении значения через this.sensors.push
ссылка на объект не меняется.this.sensors = [...this.sesnsors, ...response.sensors]
this.changeDetector.markForCheck()
private changeDetector: ChangeDetectorRef
) webpack --watch
"scripts": {
"ng": "ng",
"lint": "ng lint",
"start": "npm-run-all --parallel webpack:watch electron:serve",
"webpack:watch": "webpack --watch",
"start:web": "webpack-dev-server --content-base . --port 4200 --inline",
"build:electron:main": "tsc main.ts --outDir dist && cpx package.json dist && cpx resources/app/**/* dist && cd dist && npm install --prod && cd ..",
"build": "webpack --display-error-details && npm run build:electron:main",
"build:prod": "cross-env NODE_ENV=production npm run build",
"electron:serve": "npm run build:electron:main && electron ./dist --serve",
"electron:dev": "npm run build && electron ./dist"
},
@HostListener('change', ['$event.target'])
- это eventListener по всему компоненту, т.е. клик в любом месте внутри компонента вызовет эту функцию. Эта функия пробегается по всем элементам в checkedJobs (список чекбоксов в шаблоне) и проверяет, отмечены ли они или нет. Если да - добавляет чекбокс в отдельный Set (это типо Array но с униками) currentCheckedInputs, а если не отмечен - удаляет. После этого пробегается уже по currentCheckedInputs, собирает айди HTML элементов и передает родительскому компоненту через this.onDelete.emit. Родительский компонент скорее всего слушает это событие и что-то дальше делает с полученной инфой.<app-show-j [currentJobs]="jobs" (onDelete)="handleDeleted($event)"></app-show-j>