Неотъемлемое и другие странные поведения, такие как постукивание снаружи, иногда Deseletemece Election, когда приложение ⇐ Html

[Anonymous]

Это очень странно, когда вы выбираете тот же час, который вы выбрали, он должен отменить его, но он не работает при тестировании на настоящем телефоне. Когда я тестирую его в своем компьютере, используя мобильные размеры 290, пиксели шириной 290 работают нормально, но затем в реальном телефоне это не так, чтобы сделать его еще более странным, что проблема возникает в угловой и ремиксе, но не в следующем.js. В next.js функция работает просто отлично. Логика не является проблемой, так как я уже проверял это несколькими способами, и она работает нормально, если эта функция следующая.js, но проблема возникнет в угловой и ремиксе.



Operating Times










Choose Operating Time





opening time









closing time














hh


{{hour}}









< /code>

Компонент: < /p>
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LucideAngularModule, ChevronDown, ChevronUp, X } from 'lucide-angular';

@Component({
selector: 'app-create-operating-times',
imports: [LucideAngularModule, CommonModule],
templateUrl: './create-operating-times.component.html',
styleUrl: './create-operating-times.component.scss'
})
export class CreateOperatingTimesComponent {

//Icons
readonly ChevronDown = ChevronDown;
readonly ChevronUp = ChevronUp;
readonly X = X;

//Loop data for time
readonly hours = Array.from({length: 24}, (_, h) => h.toString().padStart(2, '0'));
readonly minutes = Array.from({length: 60}, (_, m) => m.toString().padStart(2, '0'));

//third form related
thirdForm: boolean = false;
openingTimeSection: boolean = false;
closingTimeSection: boolean = false;
openHourSelected: string = "";

openCloseThirdForm(){
if(!this.thirdForm){
this.thirdForm = true;
this.openingTimeSection = true;
this.closingTimeSection = false;
}else{
this.thirdForm = false;
this.openingTimeSection = false;
this.closingTimeSection = false;
}
}

handleOpeningTimeSection(){
if(!this.openingTimeSection){
this.openingTimeSection = true;
this.closingTimeSection = false;
}else{
this.openingTimeSection = false;
}
}

handleChooseOpeningHour(hour: string){
if(this.openHourSelected === hour){
this.openHourSelected = ""
}else{
this.openHourSelected = hour;
}
}

handleClosingTimeSection(){
if(!this.closingTimeSection){
this.openingTimeSection = false;
this.closingTimeSection = true;
}else{
this.closingTimeSection = false;
}
}
}
< /code>
scss: < /p>
html {
touch-action: manipulation;
width: 100%;
}

.container{
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 0.5rem;
padding-right: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}

.form_outer_div{
border-width: 1px; /* Tailwind's 'border' */
border-radius: 0.375rem; /* Tailwind's 'rounded-md' */
border-color: #1e3a8a; /* Tailwind's 'border-blue-900' */
padding: 0.5rem; /* Tailwind's 'p-2' */
margin: 0; /* Tailwind's 'mb-2' */
display: grid; /* Tailwind's 'grid' */
width: 100%; /* Tailwind's 'w-full' */
border: 2px solid #1e3a8a;;
}

.flex_centering_no_border{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.centering_grid_div_content_base_class{
display: grid;
border-radius: 0.375rem;
border: 1px solid #1e40af;
text-align: center;
justify-items: center;
padding: 0.5rem;
}

.centering_grid_div_content_base_class_no_border{
display: grid;
border-radius: 0.375rem;
text-align: center;
justify-items: center;
padding: 0.5rem;
}

.div_flex_centering_with_border{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border: 2px solid #1e40af; /* border-blue-900 */
border-radius: 0.375rem; /* rounded-md */
padding-top: 0.25rem; /* pt-1 */
padding-bottom: 0.25rem; /* pb-1 */
}

.input_fields, .input_fields::placeholder{
border-width: 1px;
border-style: solid;
border-color: #1e3a8a; /* Tailwind's border-blue-900 */
border-radius: 0.375rem; /* rounded-md */
text-align: center;
margin: 0; /* mb-2 */
caret-color: transparent;
height: 2rem;
}

.small_text_red_color_within_div{
display: flex;
font-weight: bold;
justify-content: center;
color: #ef4444;
font-size: 16px;
}

.small_gray_p{
color: #6b7280; /* Tailwind's gray-500 */
font-size: 1rem; /* Tailwind's text-xs */
font-weight: bold;
}

.gray_p{
font-size: 1.20rem; /* Tailwind's 'text-base' */
color: #6b7280; /* Tailwind's 'text-gray-500' */
font-weight: bold;
}

.icon__wrapper_form{
display: flex;
justify-content: space-between;
}

.icon__styling__form{
margin-bottom: 2px;
padding-top: 0px;
}

::ng-deep .open_close_forms_icons svg {
width: 32px !important;
height: 32px !important;
stroke-width: 3;
stroke: #1e3a8a;
}

.div_what_is_section_about_and_icon{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}

.p_operating_times{
color: #6b7280; /* Equivalent to text-gray-500 in Tailwind */
font-size: 0.75rem; /* Equivalent to text-xs in Tailwind */
}

.container_holding_certain_type_of_time{
@extend .centering_grid_div_content_base_class;
height: 15rem;
border-width: 1px;
border-style: solid;
border-color: #e5e7eb; /* Default border color in Tailwind */
}

.what_is_this_section_about{
color: #3B82F6; /*blue-500*/
margin-bottom: 2px;
font-weight: bold;
font-size: 1.35rem;
}

.time_labeling{
display: flex;
color: #f87171; /* Tailwind's red-500 color */
font-weight: bold;
font-size: 0.875rem; /* 14px */
justify-content: center
}

.loop_content_div{
border-top: 1px solid #3b82f6;
padding: 0.25rem; /* 4px */
border-bottom: 1px solid #3b82f6; /* Tailwind's blue-500 color */
cursor: pointer;
width: 48px;
}

.loop_content_div:hover{
@extend .hover_effect_sky_600;
}

.time_div_content{
-webkit-tap-highlight-color: transparent; /* Hide tap highlight */
touch-action: manipulation; /* Reduce delay on Android */
display: grid;
border-radius: 0.375rem;
border-color: #1e3a8a; /* Tailwind's blue-900 color */
padding: 0.25rem; /* 4px */
height: 100%;
overflow-y: auto;
width: 100%;
/* Mobile interaction helpers */
-webkit-overflow-scrolling: touch;
touch-action: manipulation;
pointer-events: auto;
}

/* xs */
@media (min-width: 475px) {
.container {
max-width: 475px;
}
}

/* sm */
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}

/* md */
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}

/* lg */
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}

/* lx */
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}

/* 2xl*/
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}

//Conditional styling
.set_background_bg_sky_600{
background-color: #0284c7;
}

//Hover effects
.hover_effect_sky_600{
background-color: #0284c7;
}

/* Animations and transition */

@keyframes blinkFade {
0% {
opacity: 0;
}
10%{
opacity: 1;
}
}

.blink_on_render{
animation: blinkFade 0.2s ease-in-out;
}
< /code>
Как я уже говорил, это очень странно, потому что создание той же точной функции в next.js отлично работает в реальном телефоне, но проблема, которую я описал ранее, происходит в угловом и ремиксе. Когда я протестировал эту функцию в браузере, используя мобильный размер, она работала, но не в реальном телефоне. Спасибо за помощь

Подробнее здесь: https://stackoverflow.com/questions/795 ... metimes-wh