Стилизация угловых записей на основе состояния внешнего интерфейса - PullRequest
Новая
       20

Стилизация угловых записей на основе состояния внешнего интерфейса

1 голос
/ 25 марта 2019

В моем внешнем приложении Angular у меня есть список записей, которые я отображаю с помощью *ngFor, например: 

<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">

В списке отображаются записи определенного status.Таким образом, у меня есть один вид сетки для записей, где status равен processing, другой, где status равен completing и т. Д.

Теперь у нас есть новая спецификация, гдезапись должна быть выделена жирным шрифтом в виде сетки до до первого нажатия.Другими словами, если я изменю status записи с processing на completing, то в моем представлении сетки для status: completing записей строка, представляющая эту новую запись, должна иметь жирный стиль, пока пользователь не нажмет на эту запись дляпервый раз.С этого момента вид сетки должен отображать эту запись точно так же, как и другие, с font-weight, установленным на normal.

Я понимаю, что для чего-то вроде угловых форм вы можете использовать markAsPristine() и markAsTouched()стилизовать ваш вывод по мере необходимости.Но как бы я справился с этим в виде сетки?И чтобы уточнить, здесь нет свойства базы данных, на которое я мог бы положиться.Это должно полагаться только на свойства и состояние интерфейса.

И еще одно добавленное требование: это должно применяться ко всем интерфейсным пользователям.Это внутреннее приложение.Итак, у нас есть несколько человек, которые смотрят на список сетки.Если один пользователь нажимает на запись, то все пользователи должны впоследствии увидеть эту запись как незакрепленную в виде сетки.Есть идеи, как мне это сделать?

Ответы [ 3 ]

0 голосов
/ 25 марта 2019

Вы можете добавить свойство в запись (например: wasClickedFirsTime), и вы можете сделать что-то вроде этого: 

<tr (click)="record.wasClickedFirsTime = true" [ngClass]="{'is-bold': !record.wasClickedFirsTime}" *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">

И конечно: 

.is-bold {
    font-weight : bold
}
0 голосов
/ 25 марта 2019

Теперь у нас есть новая спецификация, где запись должна быть выделена жирным шрифтом в виде сетки до> первого нажатия.

Это легко. Вы можете добавить логическое свойство clicked к элементам коллекции records или сохранить идентификаторы выбранных элементов в массиве, в зависимости от того, что вам больше нравится.

И еще одно добавленное требование: это необходимо применять ко всем интерфейсным пользователям. Это внутреннее приложение. Итак, у нас есть несколько человек, которые смотрят на список сетки. Если один пользователь нажимает на записи, то все пользователи должны впоследствии увидеть эту запись как незакрепленную в вид сетки.

А этот хитрый. Единственный ответ, который я могу придумать, - это WebRTC. Я считаю, что он соответствует требованиям: общение клиента с клиентом без участия сервера.

Проверьте, если что-то подобное https://stackblitz.com/edit/angular-webrtc будет работать на вас.

Но: если Алиса нажмет Item 1 сейчас, а Боб войдет в систему через час и увидит Item 1 как нажал, , что Я думаю, что не может быть сделано без серверной стороны, обеспечивающей постоянство.

0 голосов
/ 25 марта 2019 
You need a style binding.

<tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }" 
[style.font-weight]="record?.status === 'processing' ? '300' : 'bold'">
</tr>

Также вы можете попробовать * ngIf = "" 

<div *ngIf="some condition"> 
   <tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">
</div>

<div *ngIf="some other condition"> 
   <tr *ngFor="let record of records | paginate: { id: 'customers', itemsPerPage: 12, currentPage: getPageNumber() }">
</div>
...