data-export 相关问题

我试图通过使用 EXPORT DATA OPTIONS 命令将数据导出到 GCS 来对各种数据集中存在的多个表进行每月备份。这些表名称存在于

我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js 我需要使用 v-for 显示 json 中的产品数组，但我无法这样做。我正在尝试显示产品数组中的 json 数据，但它不起作用。 Vue.js <div class="box" v-for="product in products" :key="product.id"> <h2>Produto {{ product.name }}</h2> <h3>Situação {{ product.situation }}</h3> </div> export default { data() { return { products: [], }; }, methods: { async getData() { try { const req = await fetch("http://localhost:3000/products"); const data = await req.json(); this.products = data.products; console.log("data" + data); } catch (error) { console.error("Error fetching data:", error); } }, mounted() { this.getData(); }, }, }; JSON： { "products": [ { "id": "a898", "name": "Claudio Romano", "situation": "Ativo" } ] } 您问错了问题，因为该问题与 JSON 无关。如果您对此进行调试，您会注意到 console.logs 不执行，这意味着问题更为根本，因为该方法本身并未实际运行。根本问题是mounted()不应该在methods内部。您正在使用 Vue 的选项 API，其中 data()、methods 和 mounted 都是独立的、单独的“选项”。您需要将安装移动到方法之外，它应该是一个“兄弟”选项。 export default { data() { ... }, methods: { ... }, mounted() { this.getData(); }, }; 游乐场演示

将 props 传递给 nextjs 中的页面组件

我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。导出类型 PageWithLayout = NextPage & { withLayout？：（页面：ReactElement）=> 我正在使用 nextjs 的 withlayout 函数为某些页面添加侧边栏。 export type PageWithLayout<P = {}, IP = P> = NextPage<P, IP> & { withLayout?: (page: ReactElement) => ReactNode; }; 这是我的使用方法： export const Interactions: PageWithLayout = () => { const [ getInteractions, { data: interactionData, fetchMore, variables, loading: isInteractionsLoading, error: isInteractionsError, }, ] = useGetInteractionsLazyQuery({ notifyOnNetworkStatusChange: true, fetchPolicy: "network-only", ssr: false, }); return ( <> <Box height={"100vh"}> </Box> </> ); }; Interactions.withLayout = (page: ReactElement) => { // how do I pass isInteractionsLoading as a prop to this component return <Layout>{page}</Layout>; }; export default Interactions; 我想要实现的是将 isInteractionsLoaded 和 isInteractionsError 作为属性传递给我的布局组件，以便我可以渲染这些状态。有没有一种方法可以实现此目的，而无需将布局组件移动到页面组件内？创建一个包装组件的 React Context 提供程序可能是您使用的解决方案，如果您不想使用任何其他包或不想使用 redux 等更强大的工具，则可以使用。但是在这里使用有点尴尬，具体取决于包含交互的组件树是什么样子。否则可以根据您的需要使用 _app 入口点。示例上下文和用法 import React from 'react'; export const InteractionContext = React.createContext({ isInteractionsLoading: false, isInteractionsError: null, }); // parent component or _app if necessary const ProviderComponent = () => { return ( <InteractionContext.Provider value={{ isInteractionsLoading, isInteractionsError }}> <Interactions /> </InteractionContext.Provider> ); }; const Layout = ({ children }) => { const { isInteractionsLoading, isInteractionsError } = useContext(InteractionContext); // Now you can use isInteractionsLoading and isInteractionsError here // ... return <div>{children}</div>; };

Angular tabView primeNG 路由

我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是 HTML 我正在尝试将路由添加到我的 tabView 但它不起作用，请问有什么建议吗？我尝试添加 routerLink="组件路径" 但没有运气这是html <p-tabView> <p-tabPanel header="Weather Data" routerLink="/weather-data"> <app-weather-data></app-weather-data> </p-tabPanel> <p-tabPanel header="Chart"> <app-chart></app-chart> </p-tabPanel> <p-tabPanel header="Heat index calculator" closable="true"> <app-heat-index></app-heat-index> </p-tabPanel> </p-tabView> 这是 module.ts import { RouterModule, Routes } from '@angular/router'; const appRoutes: Routes = [ { path: 'weather-data', component: WeatherDataComponent }, { path: 'chart', component: ChartComponent }, { path: 'heat-index', component: HeatIndexComponent }, ]; @NgModule({ declarations: [ AppComponent, WeatherDataComponent, ChartComponent, HeatIndexComponent, ], imports: [ BrowserModule, TabViewModule, ButtonModule, ChartModule, TableModule, HttpClientModule, InputNumberModule, FormsModule, SelectButtonModule, DropdownModule, BrowserAnimationsModule, FontAwesomeModule, InputSwitchModule, PaginatorModule, ReactiveFormsModule, RouterModule.forRoot(appRoutes), ], providers: [DatePipe], bootstrap: [AppComponent], }) export class AppModule {} 我找不到有关 tabView 组件的任何有关如何实现路由的文档，感谢任何帮助我按以下方式使用了 TabMenu 组件。 <p-tabMenu [model]="items"> </p-tabMenu> <router-outlet></router-outlet> MenuItem 类型有一个命令属性，在命令上您可以实现自定义操作，在您的情况下可以是路由。 this.items = [ { label: "Map", icon: "pi pi-fw pi-map", command: () => { this.router.navigate(["./map"]) }, }, ];

为什么我有很多对 API 的请求，需要在 next.js 13v 的服务器端获取数据

我使用 Next.js 13v 在服务器端获取数据。我的组件 const 页脚 = async () => { // 获取数据 const allCategories = (await getAllCategories({})).data; 返回我使用 Next.js 13v 在服务器端获取数据。我的组件 const Footer = async () => { // Get data const allCategories = (await getAllCategories({})).data; return <footer className={styles.footer}></footer>; }; 我的功能 export const getAllCategories = async ( params: IGetAllCategoriesRequest, ): Promise<AxiosResponse<IGetAllCategoriesResponse>> => { const url = 'static-pages/category/public'; const response = await axiosInstance.get<IGetAllCategoriesResponse>( url, { params: params, }, ); return response; }; 如果请求成功，我有一个请求但是如果出现错误，我有很多请求，然后重定向到错误页面本机获取具有相同的行为那么为什么我在 next.js 13v 中对 API 有很多请求并在服务器端获取数据？可能和开发模式有关。我发现这篇文章可能与此行为有关：https://dev.to/noclat/fixing-too-many-connections-errors-with-database-clients-stacking-in-dev-mode-with-next -js-3kpm

react-hook-form useForm 每次在 Nextjs 页面路由上执行

嗨，我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。然而，似乎每次都会执行useForm，并且defaultValues是在页面路由中设置的（点击嗨，我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。不过，好像每次都会执行useForm，并且在页面路由时设置defaultValues（点击<Link to=XX>）。如何跨多个页面保存表单数据？请帮助我。这是我的代码。 _app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ); FormProvider.tsx export const FormProvider = ({ children, }: { children: React.ReactNode; }) => { const defaultValues: MyForm = { name: '', description: '' }; const form = useForm({ defaultValues, resolver: zodResolver(MyFormSchema), }); const onSubmit = () => console.log("something to do"); return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}>{children}</form> </Form> ); }; 您正在寻找的是跨多个页面维护的某种全局状态。对于这个例子，我将使用 React 的上下文 API，如果这不适合您的用例，您可以找到一些其他状态管理库。首先，您需要创建一个全局上下文，并在表单提供程序中包含一个全局状态 // FormProvider.tsx import { createContext, useContext, useState } from 'react'; const FormContext = createContext(); // Exported to be used in other components export const useFormContext = () => useContext(FormContext); export const FormProvider = ({ children }) => { const [formData, setFormData] = useState({}); return ( <FormContext.Provider value={{ formData, setFormData }}> {children} </FormContext.Provider> ); }; 现在您需要用 FormProvider 包装您的应用程序 // You are already doing this part //_app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ) 现在你可以像这样使用它了。请记住，您将更新表单的全局状态，该状态将在您的所有页面上发生变化。 // In your form component import { useForm } from 'react-hook-form'; import { useFormContext } from '../path/to/formContext'; const MyFormComponent = () => { const { formData, setFormData } = useFormContext(); const { register, handleSubmit } = useForm({ defaultValues: formData, resolver: zodResolver(MyFormSchema), }); const onSubmit = (data) => { setFormData(data); // Handle form submission }; return ( <form onSubmit={handleSubmit(onSubmit)}> {/* Form fields */} </form> ); }; 您可以从其他页面访问数据的示例 // In another page or component import { useFormContext } from '../path/to/formContext'; const AnotherPage = () => { const { formData } = useFormContext(); // Use formData as needed };

如果类型是从变量进行数据绑定，则通过 <object> 标签在 Angular 中显示 pdf 无法在 Chrome 中工作

我正在尝试通过标签在 Chrome 中显示 pdf。如果我手动编写类型，它会起作用：不工作但是... 我正在尝试通过 <object> 标签在 Chrome 中显示 pdf。如果我手动写 type: 就可以了 <object [data]="getUrl(true)" type="application/pdf"> Not working </object> 但如果我从变量读取类型则不会： <object [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> 为什么？这是一些非常奇怪的错误，还是我做错了什么可怕的事情。这里是plunkr。它可以在 Firefox 中运行（所有 4 个对象都会显示），但不能在 Chrome 中运行 (Version 74.0.3729.169 (Official Build) (64-bit))：我遇到了同样的问题，但我不明白原因。就我而言，我决定在基于 Blink 引擎的浏览器中使用“embed”元素而不是“object”元素。 <ng-template #blinkPlatformViewer> <embed [src]="getUrl(true)" [type]="file.mimeType"/> </ng-template> <object *ngIf="!isBlinkPlatform; else blinkPlatformViewer" [data]="getUrl(true)" [type]="file.mimeType"> Not working </object> import { Platform } from '@angular/cdk/platform'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; export class FileContentComponent { constructor(private readonly sanitizer: DomSanitizer, private readonly platform: Platform) { } get isBlinkPlatform(): boolean { return this.platform.BLINK; } }

Vue.js 风格的 v-html 和范围内的 css

如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue 如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue <template> <div class="icon" v-html="icon"></icon> </template> <script> export default { data () { return {icon: '<svg>...</svg>'} } } </script> <style scoped> .icon svg { fill: red; } </style> 生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div> 生成CSS .info svg[data-v-9b8ff292] { fill: red; } 如您所见，v-html 内容没有 data-v 属性，但生成的 css 对于 svg 具有 data-v 属性。我知道这是 vue-loader 的预期行为（https://github.com/vuejs/vue-loader/issues/359）。在本期中提到了后代选择器。但正如你所看到的，我在我的 css 中使用了它，但它不起作用。如何设置 v-html 内容的样式？我正在使用vue-loader 15.9.1。 >>>解决方案对我不起作用（没有效果），而/deep/方法导致构建错误...... 这是有效的： .foo ::v-deep .bar { color: red; } 正如我在这里的回答所述：新版本的vue-loader（从版本12.2.0开始）允许您使用“深层范围”CSS。你需要这样使用它： <style scoped>现在支持可以影响子级的“深度”选择器使用 >>> 组合器的组件： .foo >>> .bar { color: red; } 将被编译为： .foo[data-v-xxxxxxx] .bar { color: red; } 更多信息请参见vue-loader的发布页面将 /deep/ 选择器与 SCSS 一起使用对我来说不起作用，但后来我尝试使用 ::v-deep 选择器例如 ::v-deep a { color: red; } 参见这个答案 AS Sarumanatee 说，如果接受的答案不起作用，请尝试： .foo /deep/ .bar { color: red; } 使用:deep {} 根据您的情况，您应该这样做： <template> <div class="icon" v-html="icon"></div> </template> <style scoped> .icon { :deep { svg { fill: red; } } } </style>

嵌套 useFetch 导致 Nuxt 3 中的 Hydration 节点不匹配

在 Nuxt 3 页面内，我通过从 pinia 存储调用操作来获取帖子数据： {{ 发布数据 }} {{ 帖子内容... 在 Nuxt 3 页面内，我通过从 pinia 商店调用操作来获取帖子数据： <template> <div v-if="postData && postContent"> {{ postData }} {{ postContent }} </div> </template> <script setup> const config = useRuntimeConfig() const route = useRoute() const slug = route.params.slug const url = config.public.wpApiUrl const contentStore = useContentStore() await contentStore.fetchPostData({ url, slug }) const postData = contentStore.postData const postContent = contentStore.postContent </script> 那是我的商店： import { defineStore } from 'pinia' export const useContentStore = defineStore('content',{ state: () => ({ postData: null, postContent: null }), actions: { async fetchPostData({ url, slug }) { try { const { data: postData, error } = await useFetch(`${url}/wp/v2/posts`, { query: { slug: slug }, transform(data) { return data.map((post) => ({ id: post.id, title: post.title.rendered, content: post.content.rendered, excerpt: post.excerpt.rendered, date: post.date, slug: post.slug, })); } }) this.postData = postData.value; if (postData && postData.value && postData.value.length && postData.value[0].id) { const {data: postContent} = await useFetch(`${url}/rl/v1/get?id=${postData.value[0].id}`, { method: 'POST', }); this.postContent = postContent.value; } } catch (error) { console.error('Error fetching post data:', error) } } } }); 浏览器中的输出正常，但我在浏览器控制台中收到以下错误： entry.js:54 [Vue warn]: Hydration node mismatch: - rendered on server:  - expected on client: div at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > at <Anonymous key="/news/hello-world()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/news/hello-world', hash: '', query: {…}, name: 'news-slug', path: '/news/hello-world', …} ... > at <RouterView name=undefined route=undefined > at <NuxtPage> at <Default ref=Ref< undefined > > at <LayoutLoader key="default" layoutProps= {ref: RefImpl} name="default" > at <NuxtLayoutProvider layoutProps= {ref: RefImpl} key="default" name="default" ... > at <NuxtLayout> at <App key=3 > at <NuxtRoot> 如何解决这个问题？我尝试在 onMounted 中获取帖子数据，但在这种情况下 postData 和 postContent 保持为空 onMounted(async () => { await contentStore.fetchPostData({ url, slug }) }) 您可以使用 ClientOnly 组件来消除该警告。请参阅文档了解更多信息。该组件仅在客户端渲染其插槽。

在我的 React 项目中运行 Jest 测试时，我遇到了 `SyntaxError: Unexpected token 'export'`

Vue 3如何获取$children的信息

这是我在 Tabs 组件中使用 VUE 2 的旧代码：创建（）{ this.tabs = this.$children; } 标签： .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码： created() { this.tabs = this.$children; } 标签： <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3：如何使用组合 API 获取有关 Tabs 组件中子项的一些信息？获取长度，迭代它们，并创建选项卡标题，...等？有任何想法吗？（使用组合API）这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件： <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们，我解决了： this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人：标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案（在对 vue 代码进行大量筛选之后）是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码，用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码然后只需向“选项卡”组件添加一个创建的方法，该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法，您可以使用useSlots：https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进，因为它不支持热重载/动态选项卡。在 Tab.vue 中： onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中： const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题，在做了很多研究并问自己为什么他们删除了$children之后，我发现他们创建了一个更好、更优雅的替代方案。这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息： https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用，向大家问好！！我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。我一直在遵循我最初发现的构建选项卡组件（Vue2）的教程的早期版本创建您自己的可重用 Vue 选项卡组件。根据 Vue 文档，假设您在 Tabs 组件下有一个默认插槽，您可以直接在模板中访问该插槽的子级，如下所示： // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于： // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容（考虑一组对象，每个部分一个，带有 title 和 component）： ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots，如 Vue 文档（上面的链接）中所述。在 3.x 中，$children 属性已被删除并且不再受支持。相反，如果您需要访问子组件实例，他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中，$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息：https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答： /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外：而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。

NextJS 中 useFormStatus() 始终为 false

我尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。我有一个像这样的表单组件函数 onSubmit(数据：z.infer 我正在尝试使用 useFormStatus() 在提交表单并等待获取数据时动态更改 UI。我有一个像这样的表单组件 function onSubmit(data: z.infer<typeof FormSchema>) { requestImg(data).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setOpen(true); setSource(imageBase64); }); } if (isDesktop) { return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6" > ... 其中 requestImg(data) 是服务器操作。然后，我将 Button 组件嵌套在不同的 Button.tsx 文件中的 <form> 中 import { useFormStatus } from "react-dom"; import { Button } from "@/components/ui/button"; export default function ButtonSub() { const { pending } = useFormStatus(); console.log(pending); return ( <Button className="w-full" type="submit" aria-disabled={pending}> {pending ? "Processing..." : "Submit"} </Button> ); } 问题是，当我单击提交时，按钮文本不会更改为“正在处理...” 编辑似乎仅当您在表单上使用操作关键字时才有效。我试过了 <form action={async (formData: FormData) => { requestImg(formData).then((imageStringify) => { const binaryData = Buffer.from(imageStringify.image); const imageBase64 = URL.createObjectURL( new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */) ); setSource(imageBase64); setOpen(true); }); }} className="w-2/3 space-y-6" > 但是现在使用 byte8Array 生成的图像已损坏。我有一个带有动态 src 的图像，其中充满了 const [source, setSource] = useState(""); <img src={source}/> 似乎只有在您使用 action 关键字时才有效形式。确实如此。 useFormStatus 必须在表单的子组件内使用，它可以监视服务器操作的状态变化。但据我所知，它会监听 action。 action 定义提交后表单数据的服务器端目的地。在服务器操作的上下文中，服务器操作向当前 URL 发出 post 请求。所以它没有监听表单 onSubmit，这就是为什么你的第一个代码执行不起作用。现在服务器操作在服务器上下文中运行，它们在服务器上执行，但setState是客户端特定的代码

显示输入类型日期的占位符文本

占位符不适用于直接输入类型日期和日期时间本地。占位符不适用于直接输入类型 date 和 datetime-local。 <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> 该字段在桌面上显示 mm/dd/yyy，而在移动设备上则不显示任何内容。如何显示 Date 占位符文本？使用onfocus="(this.type='date')"，例如： <input required="" type="text" class="form-control" placeholder="Date" onfocus="(this.type='date')"/> 使用onfocus和onblur...这是一个例子： <input type="text" placeholder="Birth Date" onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"> 在这里，我尝试了 data 元素中的 input 属性。并使用 CSS 应用所需的占位符 <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> input[type="date"]::before { content: attr(data-placeholder); width: 100%; } /* hide our custom/fake placeholder text when in focus to show the default * 'mm/dd/yyyy' value and when valid to show the users' date of birth value. */ input[type="date"]:focus::before, input[type="date"]:valid::before { display: none } <input type="date" name="dob" data-placeholder="Date of birth" required aria-required="true" /> 希望这有帮助 <input type="text" placeholder="*To Date" onfocus="(this.type='date')" onblur="(this.type='text')" > 这段代码对我有用。只需使用这个即可对于 Angular 2，你可以使用这个指令 import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDateClick]' }) export class DateClickDirective { @HostListener('focus') onMouseFocus() { this.el.nativeElement.type = 'date'; setTimeout(()=>{this.el.nativeElement.click()},2); } @HostListener('blur') onMouseBlur() { if(this.el.nativeElement.value == ""){ this.el.nativeElement.type = 'text'; } } constructor(private el:ElementRef) { } } 并像下面一样使用它。 <input appDateClick name="targetDate" placeholder="buton name" type="text"> 对于 React，你可以这样做。 const onDateFocus = (e) => (e.target.type = "datetime-local"); const onDateBlur = (e) => (e.target.type = "text"); . . . <input onFocus={onDateFocus} onBlur={onDateBlur} type="text" placeholder="Event Date" /> 我是这样做的： var dateInputs = document.querySelectorAll('input[type="date"]'); dateInputs.forEach(function(input) { input.addEventListener('change', function() { input.classList.add('no-placeholder') }); }); input[type="date"] { position: relative; } input[type="date"]:not(.has-value):before { position: absolute; left: 10px; top: 30%; color: gray; background: var(--primary-light); content: attr(placeholder); } .no-placeholder:before{ content:''!important; } <input type="date" name="my-date" id="my-date" placeholder="My Date"> 现代浏览器使用 Shadow DOM 来方便输入日期和日期时间。因此，除非浏览器出于某种原因选择回退到 text 输入，否则不会显示占位符文本。您可以使用以下逻辑来适应这两种情况： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 我使用了 Tailwind CSS 语法，因为它很容易理解。让我们一点一点地分解它： ::-webkit-calendar-picker-indicator { @apply hidden; /* hide native picker icon */ } 使用其 Shadow DOM 伪元素选择器隐藏本机选择器图标（通常是日历）。 input[type^='date']:not(:placeholder-shown) { @apply before:content-[attr(placeholder)]; @apply sm:after:content-[attr(placeholder)] sm:before:hidden; } 选择所有未显示占位符的 date 和 datetime-local 输入，并且：默认使用 placeholder 伪元素显示输入 ::before 文本在小屏幕及以上屏幕上切换为使用 ::after 伪元素 input[type^='date']::after, input[type^='date']::before { @apply text-gray-500; } 设置 ::before 和 ::after 伪元素的样式。

如何解决错误“as.data.frame.default(data) 中的错误：无法强制类‘“lm”’到 data.frame”

abc4 <- lm(Sales~., data=abc4) summary(abc4) abc5 <- lm(Sales~ T+June+July+August+September+October+November+December, data=abc4) summary(abc5) I'm trying to run regression. If I run the fi...

调查表问题：调查表功能显示的观测值数量与数据中的实际观测值数量不同

数据<- data.frame(X =c(1,4,6,4,1,7,3,2,2),Y = c(6,5,9,9,43,65,45,67,90),weight=c(0.1,1.2,4,0,0,5,0.65,1,0)) dat_design <- svydesign(ids = ~1, data = Data, weights = Data$weight) ab=

如何使用adb命令将文件从计算机推送到/data/.../databases/？

以下命令是拉取文件： adb -d shell "run-as com.myapp cat /data/data/com.myapp/databases/file.db" > file.db 但是如何像 Android Studio 通过设备文件那样将其推回

WP All 导出带功能的条件字段

我使用 WP All Export 将发票数据导出到我的会计程序，我需要创建一个包含 _billing_company 字段的“客户”字段，以防我有数据或 $_billing_first...

是否可以知道Visual Studio Code任务执行的命令？

我正在使用 VS Code 和 Java 扩展包进行 Java 编程。我可以使用“Rebuild All”按钮开始构建我的项目，或者使用“Export Jar.....

为 Data Fusion 或 Cloud Composer 实例分配静态 IP

我正在尝试使用 Google Data Fusion 连接到 Microsoft SQL Server 数据库，并且需要有一个静态 IP。我尝试在子网上配置静态 IP 并将其连接到 Data Fusion ...

获取世博会资产

访问世博会资产的正确方法是什么？我试过这个：等待 Asset.loadAsync(require('file:///assets/data/catalog.json')); 错误：无法解析“file:///assets/data/catalog.json”...

Tomcat SOLR 多核设置

我花了整个上午尝试在 Apache Tomcat 服务器下运行的 SOLR 安装上设置多个核心，但没有成功。我的 solr.xml 如下所示：我花了整个上午尝试在 Apache Tomcat 服务器下运行的 SOLR 安装上设置多个核心，但没有成功。我的 solr.xml 看起来像这样： <solr persistent="false" sharedLib="lib"> <cores adminPath="/admin/cores"> <core name="core0" instanceDir="/multicore/core0"> <property name="dataDir" value="/multicore/core0/data" /> </core> <core name="core1" instanceDir="/multicore/core1"> <property name="dataDir" value="/multicore/core1/data" /> </core> </cores> </solr> 正确的目录结构是什么？我需要更改 solrconfig.xml 中的某些内容吗？检查您的instanceDir值是否相对于-Dsolr.solr.home。如果 -Dsolr.solr.home 是“多核”，那么您的 instanceDir 应该只是“core0”。如果将数据文件夹放在instanceDir中，则不必指定其路径： <?xml version='1.0' encoding='UTF-8'?> <solr persistent="true"> <cores adminPath="/admin/cores"> <core name="core0" instanceDir="core0" /> <core name="core1" instanceDir="core1" /> </cores> </solr> 您不必在 solrconfig.xml 中设置任何内容。但如果您需要独立于核心位置配置处理程序，则可以使用变量 ${solr.core.instanceDir}。更新要使用 Tomcat 设置 solr.solr.home 变量，请在启动 Tomcat 之前使用 JAVA_OPTS 环境变量： JAVA_OPTS="-Dsolr.solr.home=multicore" export JAVA_OPTS tomcat/bin/catalina.sh start 确保相对于工作目录正确设置“多核”。例如，如果 solr.solr.home='multicore'，则必须从“multicore”所在的目录启动 Tomcat。这有点晚了，但我刚刚发布了一篇博客文章，其中包含 Tomcat 上多核 SOLR 实例的说明，内容如下：下载并安装32位/64位Windows服务 Tomcat 安装程序在服务器上安装 Tomcat（无这里有特别说明——只需运行安装并安装到任何地方你希望）通过访问 http://localhost:8080 验证 Tomcat 的安装编辑 Tomcat conf/server.xml 并将 URIEncoding="UTF-8" 添加到元素如下所示下载 SOLR 来自此处找到的镜像之一（下载了 apache-solr-1.4.1.zip 包）并解压包创建SOLR目录将由（在我的例子中我使用 e:\inetpub\solr）托管复制将 example\solr 目录的内容添加到您的 SOLR 主机目录（在我的例子中为 e:\inetpub\solr）创建您的每个核心的 SOLR 主机目录下的目录希望创建（我为每个我想要的核心创建了十几个文件夹在 e:\inetpub\solr 目录中创建。目录包括 en-US、en-CA、en-GB 等）复制 solr.xml 文件来自 example\multicore 目录并将其粘贴到您的 SOLR 主机目录（在我的示例中为 e:\inetpub\solr）编辑 solr.xml 文件包含每个的信息您创建的核心的数量（如果您在主机下创建了一个文件夹）名为 en-US 的核心，然后在 solr.xml 文件中的元素：）停止 Tomcat 服务复制 *solr*.war 文件解压后的SOLR包中的dist目录到您的 Tomcat webapps 文件夹重命名 *solr*.war 文件转换为 solr.war 在 Windows 任务栏右侧的通知区域中，右键单击 Apache Tomcat 7 图标并选择配置单击Java 选项卡并将以下内容添加到 Java Options 文本中框：-Dsolr.solr.home=e:\inetpub\solr（更改 e:\inetpub\solr 到托管 SOLR 的任何位置）单击对话框中OK，然后启动Tomcat service 打开 conf\solrconfig.xml 文件在您创建的每个核心下并更改 dataDir 元素指向特定的目录。如果此步骤未完成，您的所有核心都会对他们的数据使用相同的数据存储。停止并重新启动 Tomcat 服务测试您的核心是否正在运行通过从网络浏览器运行查询http://localhost:8080/solr/en-US/select?q=*:*（替换 “en-US”与您为核心之一命名的任何内容）

将多个对象添加到另一个对象

我一直在开发本教程中制作的应用程序版本（https://learn.microsoft.com/pl-pl/aspnet/core/data/ef-rp/complex-data-model?view =aspnetcore-5.0&tabs=visual-studio）。我有

为什么没有从指针到引用的隐式转换到const指针[重复]

我将用代码来说明我的问题： #包括 void PrintInt(const unsigned char*& ptr) { 整数数据=0； ::memcpy(&data, ptr, sizeof(data)); // 推进 po...

调整 ggplot 条形图中的 x 轴标签

我想移动上方平均线下方的条形标签。我正在使用这段代码来制作这个图表水平 <- mean(data$SPAD) quux <- data %>% 选择（基因型，规格...

AOS 中的数据绑定 - 可能吗？

我在我的角度项目中使用滚动动画，我有一堆图像，我想一个接一个地显示它们。我在我的角度项目中使用滚动动画，我有一堆图像，我想一个接一个地显示它们。 <div class="img-gallery"> <div *ngFor="let imgSrc of images" data-aos="zoom-in"> <img [src]="imgSrc"> </div> </div> 我想为每个包装 div 添加 data-aos-delay 指令，就像这样 <div *ngFor="let imgSrc of images; let i = idnex" data-aos="zoom-in" [data-aos-delay]="i * 100"> <img [src]="imgSrc"> </div> 但是，不出所料 - 它向我显示了错误无法绑定到“data-aos-delay”，因为它不是“div”的已知属性我怎样才能实现它？任何实施都将感激地接受可以改成下面吗 <div *ngFor="let imgSrc of images; let i = idnex" data-aos="zoom-in" data-aos-delay="{{i * 100}}"> <img [src]="imgSrc"> </div>

运行 npx json-server --watch Data/db.json --port 8000 时，它会抛出一个新错误

每当我运行 npx json-server --watch Data/db.json --port 8000 时，它都会抛出错误类型错误 [ERR_PARSE_ARGS_UNKNOWN_OPTION]：未知选项“--watch”。要指定位置参数星...

NG8001：“app-welcome”不是已知元素：

我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢你！应用程序组件.html {{标题}}&l... 我的 Angular 应用程序遇到问题，收到错误 8001。我不知道如何处理它。谁能帮我这个？谢谢！ app.component.html <h1>{{ title }}</h1> <p>Congratulations! Your app is running. 🎉</p> <app-welcome></app-welcome> app.component.ts import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, RouterOutlet], templateUrl: './app.component.html', styleUrl: './app.component.css' }) export class AppComponent { title = 'XYZCARS'; } welcome.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-welcome', templateUrl: './welcome.component.html', styleUrl: './welcome.component.css' }) export class WelcomeComponent { car = 'toyota'; } 我的项目最初没有 app.module.ts 文件。我自己添加了它并根据网上找到的一些信息进行了配置，但问题仍然存在并且仍未解决。谁能帮我解决这个问题吗？ app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { WelcomeComponent } from './welcome/welcome.component'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent, WelcomeComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 如果您正在 Angular 17 中创建项目->使用这些命令 ng app --no-standalone 然后你就得到了 app.module.ts 文件。

有没有办法在有条件的情况下隐藏v-data-table中的展开按钮？

借助 v-data-table 中的“show-expand”属性，展开按钮会显示在数据表的所有行中。借助 v-data-table 中的“show-expand”属性，展开按钮会显示在数据表的所有行中。 <v-data-table :expanded.sync="expanded1" :headers="headers1" :items="items" show-expand class="elevation-1" > 有没有办法根据 Vuetify 3 中的条件进行渲染？在 Vuetify 2 中，使用 item.data-table-expand 插槽来实现此目的。 <template #item.data-table-expand="{ item, expand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="expand(!isExpanded)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template> 但是，在 Vuetify 3 中使用相同的代码块会返回类型错误： Uncaught TypeError: expand is not a function expand 现在是 toggleExpand 并期望 internalItem 插槽道具 <template #item.data-table-expand="{ item, internalItem, toggleExpand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="toggleExpand(internalItem)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template>

带有 std::enable_if 的嵌套模板类，C++

我有一个模板类B，其第一个参数T1必须继承类A，第二个参数T2用于嵌套类C： A 类 { ... }; 模板我有一个模板类B，其第一个参数T1必须继承类A，第二个参数T2用于嵌套类C： class A { ... }; template<typename T1, typename T2 = T1, typename = std::enable_if_t<std::is_base_of<A, T1>::value>> class B { class C { T2 data; C(T2 data); void func(); ... }; ... }; 问题是当我尝试定义嵌套类的构造函数和方法时出现错误： template<typename T1, typename T2, typename> B<T1, T2>::C::C(T2 data) : data(data) { ... } template<typename T1, typename T2, typename> void B<T1, T2>::C::func() { ... } E0464“B::value, void>>::C”不是类模板； C3860 类类型名称后面的类型参数列表必须按照类型参数列表中使用的顺序列出参数。如果我不使用嵌套类或不使用 std::enable_if，代码可以正常工作，但在这里我需要它们，而且我真的不明白出了什么问题。定义构造函数时仍然需要提供默认的模板参数： template<typename T1, typename T2, typename D> B<T1, T2, D>::C::C(T2 data) : data(data) { } 或者，由于最后一个参数仅用于 SFINAE 目的并且始终旨在为 void，因此您可以编写： template<typename T1, typename T2> B<T1, T2, void>::C::C(T2 data) : data(data) { } 请注意，最好在 C 中定义构造函数。无论如何，大多数时候你都无法将模板拆分为标头/源代码，并且处理类模板的外线定义可能非常烦人且脆弱。 C++17 和 C++20 的注意事项如果您使用的是 C++20，您可以编写： template<std::derived_from<A> T1, typename T2 = T1> class B { /* ... */ }; template<std::derived_from<A> T1, typename T2> B<T1, T2>::C::C(T2 data) : data(data) { } 如果您使用的是 C++17，您至少可以使用辅助变量模板std::is_base_of_v<A, T1>。

将 Spring Data Rest 与反应式存储库一起使用时，FluxUsingWhen 无法转换为 Iterable 错误

我配置了一个 ReactiveSortingRepository 来查看 Spring Data Rest 上的反应功能，过去我主要使用 PagingAndSortingRepository 将资源公开为 REST 端点，所以想要...

OpenEdge ABL JSON 到临时表：READ-JSON

我如何将其（如下）读取到临时表中： { “参数”：{ }, "data": "{\"姓名\":\"morpheus11\",\"工作\":\"leader1221\"}&qu...

如何将自定义用户类型作为参数传递给 Spring Data JPA 查询方法？

我有一个 Spring data JPA 存储库，它由 postgresql 数据库支持。作为查询的一部分，我想在查询中使用间隔。我设法通过创建一个 SQLFunction 来实现它...

在极坐标数据框中切片多个块

考虑以下数据框： df = pl.DataFrame(data={"col1": range(10)}) ┌──────┐ │ 第 1 列 │ │ --- │ │ i64 │ ╞══════╡ │ 0 │ │ 1 │ │ 2 │ │ 3 │ │ 4 │ │ 5 │ │ 6 │ ...

从 html 中提取 <h2> 标题文本，其中标题文本可能包含 <code> 和 </code> 标签

我有一个 html 文件，其中包含一些标签，例如一个<- ' 我有一个 html 文件，其中包含一些 <h2> 标签，例如 a <- '<section id="sec-standard-stoet-geary" class="level2" data-number="9.4"> <h2 data-number="9.4" class="anchored" data-anchor-id="sec-standard-stoet-geary"> <span class="header-section-number">9.4</span> Standardising PISA results</h2>' b <- '</span> <span class="fu">read_parquet</span>(<span class="st">"<folder>PISA_2015_student_subset.parquet"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre> </div> </div> </section><section id="sec-leftjoin" class="level2" data-number="9.3"><h2 data-number="9.3" class="anchored" data-anchor-id="sec-leftjoin"> <span class="header-section-number">9.3</span> Linking data using <code>left_join</code> </h2> <p>' 我可以使用以下方法提取a的标题： str_extract_all(a, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > [1] "Standardising PISA results" 但是在 b 上尝试这个不会返回任何结果： str_extract_all(b, '(?<=(<[/]span>)).*(?=(<[/]h))')[[1]] %>% str_squish() > character(0) 编辑：从评论来看，这似乎是正则表达式无法解析换行符。我尝试在正则表达式(?s)中启用单行模式进行解析，但它仍然不起作用我会在这里使用 html 解析器而不是正则表达式： library(rvest) read_html(a) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.4 Standardising PISA results" read_html(b) |> html_elements("h2") |> html_text() |> trimws() #> [1] "9.3 Linking data using left_join"

如何利用v-data-table中的item-class来增加字体大小？

我对 VueJs 比较陌生，并尝试将我的 v-data-table 项目（Vuetify 2）中的字体大小更新为 20px。在这样做的过程中，我遇到了物品等级。这种方法对 chang 来说是成功的...

在 MUI Data Grid v6 中更新另一个单元格时，如何在编辑模式下更新一个单元格？

我正在使用 MUI Data Grid v6 组件并利用其内置的 CRUD 编辑功能。我有多个列，所有列都可以编辑。在我的“类别&...”列中选择新值后

RxJs 计时器仅调用一次，而不是每秒调用一次

下面是我的代码： this.callActiveListSubscription = 定时器(0,1000).pipe(switchMap(() => this.realtimeSupervisorHeatMapService.getLiveCallList())).subscribe((data: any) => { 控制台.log('

从 html 中提取 <h2> 标题文本，其中标题文本可能包含换行符

检查play.api.libs.json.Json中是否存在密钥

包含类似 play.api.libs.json.Json 的功能 val data=Map("id" -> "240190", "密码" -> "密码","电子邮件" -> "[email protected]") data.contains("email")//true val信息=Json...

AOS - 如何在向上滚动时不再隐藏元素

我在我的角度项目中使用aos库，并将其附加到元素上我在我的 Angular 项目中使用 aos 库，并将其附加到元素 <div data-aos="zoom-in"></div 它工作正常，但我的问题是，当我向上滚动时 - 元素消失，向下滚动 - 再次出现。我认为这是 AOS 的默认行为，所以我的问题是 - 我该如何更改它？因此，当滚动到元素出现后的任意位置时，它会静态地停留在那里并且不会消失。感谢您的每一个回答。您可以使用如下属性data-aos-once="true"来避免元素在向上滚动时消失。 <div data-aos="zoom-in" data-aos-once="true"></div> 注意：使用data-aos-once="true"时，AOS效果只会起作用一次。

PySpark 分区镶木地板需要很长时间才能加载，即使使用指定的模式

设置：我有一个包含约 1300 个分区 parquet 文件的文件夹（例如 C:\Project Data\Data-*.parquet），其中 * 是一个计数器，每个文件大小约为 8MB。所有文件都具有相同的架构。我是茹...

CSS 在窄屏幕上显示每个单元格一行的表格

我的 HTML 看起来有点像这样我的 HTML 看起来有点像这样 <html><body><table> <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead> <tbody> <tr><td>1A</td><td>1B</td><td>1C</td><td>1D</td><td>1E</td></tr> <tr><td>2A</td><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr> <tr><td>3A</td><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr> </tbody> </table></body></html> 每一行代表一个对象，列是它的属性。实际上，单元格值相当长——有时甚至有 20-30 个字符长。它在大多数设备上渲染良好，但在较小的手机上可能会出现问题。我知道我可以在狭窄的设备上抑制某些列，但在这个特定的情况下感觉不太好。目前我的桌子上有 x-overflow: scroll，但我更希望有一些 CSS 可以使表格在窄设备上呈现得更像这样： A: 1A B: 1B C: 1C D: 1D E: 1E ----- A: 2A B: 2B C: 2C D: 2D E: 2E ----- (etc) 我了解如何测试设备宽度，因此出于这个问题的目的，我们假设我想无条件地执行此操作。稍微更改一下 HTML 标记就可以了，例如添加额外的类或属性，尽管我想使用 <table> 元素来保留它，每个逻辑行有一个 <tr>。这是为了向后兼容，因为我知道有相当多的用户会抓取该网站（尽管存在更简洁的 API）。由于内部政治，如果可能的话，我宁愿避免需要 Javascript 的解决方案（并且无论如何，如果需要，我知道如何编写 JS 解决方案）。我可以做到这一点，但我不知道如何从这里硬编码为“X”的字段名称开始： thead { display: none; } table, tr, td { display: block; } tr + tr { border-top: thin solid black; } td::before { content: "X:"; display: inline-block; width: 2em; } 我见过很多网站都在做这种事情，但目前我正在努力寻找一个在 CSS 中做这件事的网站。看起来这应该是一个常见问题，但我很难知道要搜索哪些术语，因此可能会在这里或其他地方错过一些很好的解释。你就快到了。可能会使用例如data-col 元素上的 <td> 属性并在 CSS 中引用它们 content 上的 :before thead { display: none; } table, tr, td { display: block; } tr+tr { border-top: thin solid black; } td::before { content: attr(data-col)':'; display: inline-block; width: 2em; } <table> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> </thead> <tbody> <tr> <td data-col="A">1A</td> <td data-col="B">1B</td> <td data-col="C">1C</td> <td data-col="D">1D</td> <td data-col="E">1E</td> </tr> <tr> <td data-col="A">2A</td> <td data-col="B">2B</td> <td data-col="C">2C</td> <td data-col="D">2D</td> <td data-col="E">2E</td> </tr> <tr> <td data-col="A">3A</td> <td data-col="B">3B</td> <td data-col="C">3C</td> <td data-col="D">3D</td> <td data-col="E">3E</td> </tr> </tbody> </table> ABCD

如何调用不在类本身中的成员函数指针？

结构CALLBACK_DATA { 对象*指针； void (对象::*回调)(); }; int main() { CALLBACK_DATA 数据 = getData(); //这不起作用。 (data.pointer)->(data.*callback)();...

c# Azure.AI.OpenAI 在启动时出现错误

我正在尝试遵循 Microsoft 的操作方法（以 C# 方式）： https://learn.microsoft.com/en-us/azure/ai-services/openai/use-your-data-quickstart?tabs=command-line%2Cpython&pivots=programming-lan...

AVX2 缩小转换，从 uint16_t 到 uint8_t

我想使用 AVX2 将 2d 数组从 16 位缩小到 8 位。有效的C++代码如下： auto * s = reinterpret_cast(i_frame.Y); 自动 * d = 缩小.data(); 对于（

Windows 窗体应用程序上的音乐位置问题

此代码正在运行：音乐声音= new Music(); sound.Play(@"C:\Users\itama\Documents\Startech\HelperApplication\HelperApplication\data\music larmSound.mp3"); 我有一个问题，如何...

如何使用javascript forloop在点击时获取html中data-id的值并返回值

这是我的html {% if t_ques %} 今天 {% 表示 t_... 中的项目这是我的html <ul class="conversations"> {% if t_ques %} <li class="grouping">Today</li> {% for item in t_ques %} <li class="active"> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if y_ques %} <li class="grouping">Yesterday</li> {% for item in y_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if s_ques %} <li class="grouping">Previous 7 days</li> {% for item in s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} {% if more_s_ques %} <li class="grouping">Previous 30 days</li> {% for item in more_s_ques %} <li> <a id="convers" class="conversation-button text-[#E8F5FC] my-2" href="{% url 'assistant:continuechat' item.pk %}" data-pk="{{item.pk}}"> <i class="fa fa-message fa-regular"></i> {{item.title| truncatewords:04 }} </a> <div class="fade"></div> <div class="edit-buttons"> <button><i class="fa fa-edit"></i></button> <button class="trash" data-id = "{{item.pk}}"><i class="fa fa-trash"></i></button> </div> </li> {% endfor %} {% endif %} </ul> </div> 我一直在尝试使用 JavaScript 单击时获取任何 data-pk 的值，但似乎无法实现。这一直说 currentTarget 未定义，当我用 target 替换它时，它说同样的事情。然后，如果我将其替换为 document.querySelector("#convers")，它只会给出第一个值，无论单击哪个这是我的 JavaScript const conversationButtons = document.querySelectorAll("#convers"); conversationButtons.forEach(button => { button.addEventListener("click", getId); }); function getId(e){ var idValue = e.currentTarget.getAttribute('data-pk'); console.log(idValue); //output corresponding target-id if(!chat_id){ url = `/chat-previous/${idValue}/` }else{ url = 'initiate-chat/' } return url; } $.ajax({ type: 'POST', url: getId(), data: { message: usermsg, chatId: chat_id, // itemId: item_id, csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(), action: 'post' }, success: function(json){ const res = json['chats'] setTimeout(() => { hideTyping(); body.appendChild(mgses(res, "assistant")); scrollToBottomOfResults(); }, 1000); console.log(json) }, error: function(rs, e){ setTimeout(() => { hideTyping(); body.appendChild(setBotResponse("bot")); scrollToBottomOfResults(); }, 600); console.log(rs.error); }, }); 我使用了其他方法，例如 const getId = () => { console.log(document.querySelector(".conversation-button").getAttribute('data-pk')) if(!chat_id){ url = `/chat-previous/${document.querySelector(".conversation-button").getAttribute('data-pk')}/` }else{ url = 'initiate-chat/' } return url; } conversationButtons.forEach(button => { button.addEventListener("click", getId); console.log(button.getAttribute('data-pk')); }); 仍然无法得到我真正想要的。有什么方法可以实现这个目标吗？委托并使用按钮的类 document.querySelector('.conversations').addEventListener('click', (e) => { let tgt = e.target.closest('.conversation-button'); if (!tgt) return; const idValue = tgt.dataset.pk; console.log(idValue); //output corresponding target-id return chat_id ? 'initiate-chat/' : `/chat-previous/${idValue}/` }) 您做出了多个错误的假设，第一个是您不能有多个具有相同 id 的元素，这将导致您描述的确切行为“它需要第一次出现的 id” 第二件事是你可能想在点击时发出ajax请求，但你构建代码的方式并不能做到这一点。要解决这些问题，请生成如下 html button.conversation-button button.conversation-button button.conversation-button 然后向所有具有 .conversation-button 类的元素添加一个事件侦听器，并将您的 ajax 调用包装到一个函数中，主要是您已经拥有的函数。 const conversationButtons = document.querySelectorAll(".conversation-button"); conversationButtons.forEach(button => { button.addEventListener("click", doStuff); }); ... function doStuff(e) { $.ajax( ... url: getId(e) ... } function getId(e) { let idValue = e.currentTarget.getAttribute('data-pk'); let url = ...; ... return url; // } 只是一些伪代码让你得到一个想法，祝你好运:)

使用 `ggsurvfit::ggsurvfit()` 绘制对数减对数图

是否可以使用 ggsurvfit::ggsurvfit() 生成对数减对数图？这是我想要生成的示例：库（ggsurvfit）温度 <- survfit2(Surv(time, status) ~ adhere, data =

使用torchvision下载的数据集在哪里？

我今天刚接触 Colab。当我使用 torchvision 下载数据集时 trainset = torchvision.datasets.CIFAR10(root='./data', train=True, download=True) 我的理解是我正在下载...

如何在React Native中显示图像的顶部，

这是我现在的情况，我的形象是这样的这是我当前的代码这是我现在的情况，我的形象是这样的这是我当前的代码 <View> <Image style={{width: '100%', height: 285}} source={{ uri: `${posterPath + data?.poster_path}`, }} resizeMode="cover" /> <Text>{data?.title}</Text> </View> 我希望我的图像看起来像这样（这只是一个例子）我知道在普通的CSS中我们是否可以使用object-position，但不幸的是React Native并不直接支持object-positionCSS属性，所以我很困惑如何实现这个您需要使用 Flex:1，它使用整个屏幕，然后相应地定位和调整图像大小。 <View style={{flex:1}}> <Image style={{width:'100%', height:285}} source={{ uri: `${posterPath + data?.poster_path}`, }} resizeMode="cover" /> <Text>{data?.title}</Text> </View>

data-export 相关问题

最新问题