Angular 11 同一组件中如何获取循环里被选中的条目值

• 首先定义3个核心状态：currentView 控制展示第一个还是第二个组件、activeItemId 存储被点击条目的唯一ID、detailData 存储第二个组件需要的详情数据
• 初始状态下currentView设为list，第二个组件用CSS display: none 或者框架的条件渲染指令隐藏
• 第一个组件的列表项绑定点击事件，点击时做3件事：把被点击条目的ID赋值给activeItemId、将currentView切换为detail、调用第二个API传入activeItemId获取对应详情
• API请求成功后把返回数据赋值给detailData，第二个组件直接读取该值渲染即可，不需要循环全量数据

React 实现示例 #

import { useState, useEffect } from 'react'

export default function Page() {
  // 核心状态定义
  const [currentView, setCurrentView] = useState('list') // list 列表页 / detail 详情页
  const [listData, setListData] = useState([])
  const [activeItemId, setActiveItemId] = useState(null)
  const [detailData, setDetailData] = useState(null)
  const [loading, setLoading] = useState(false)

  // 初始加载第一个API获取列表
  useEffect(() => {
    fetch('/api/list')
      .then(res => res.json())
      .then(data => setListData(data))
  }, [])

  // 列表项点击事件
  const handleItemClick = (itemId) => {
    setActiveItemId(itemId)
    setCurrentView('detail')
    setLoading(true)
    // 调用第二个API获取对应详情
    fetch(`/api/detail?id=${itemId}`)
      .then(res => res.json())
      .then(data => {
        setDetailData(data)
        setLoading(false)
      })
  }

  return (
    <div className="page-container">
      {/* 第一个组件：列表组件 */}
      {currentView === 'list' && (
        <div className="list-component">
          {listData.map(item => (
            <div 
              key={item.id} 
              className="list-item"
              onClick={() => handleItemClick(item.id)}
            >
              {item.name}
            </div>
          ))}
        </div>
      )}

      {/* 第二个组件：详情组件 */}
      {currentView === 'detail' && (
        <div className="detail-component">
          {loading ? <p>加载中...</p> : (
            <div>
              <h2>{detailData.title}</h2>
              <p>{detailData.content}</p>
              {/* 其他详情字段 */}
              <button onClick={() => setCurrentView('list')}>返回列表</button>
            </div>
          )}
        </div>
      )}
    </div>
  )
}

Vue 3 实现示例 #

<template>
  <div class="page-container">
    <!-- 列表组件 -->
    <div v-if="currentView === 'list'" class="list-component">
      <div 
        v-for="item in listData" 
        :key="item.id"
        class="list-item"
        @click="handleItemClick(item.id)"
      >
        {{ item.name }}
      </div>
    </div>

    <!-- 详情组件 -->
    <div v-if="currentView === 'detail'" class="detail-component">
      <p v-if="loading">加载中...</p>
      <div v-else>
        <h2>{{ detailData.title }}</h2>
        <p>{{ detailData.content }}</p>
        <button @click="currentView = 'list'">返回列表</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const currentView = ref('list')
const listData = ref([])
const activeItemId = ref(null)
const detailData = ref(null)
const loading = ref(false)

// 初始加载列表
onMounted(async () => {
  const res = await fetch('/api/list')
  listData.value = await res.json()
})

// 点击列表项
const handleItemClick = async (itemId) => {
  activeItemId.value = itemId
  currentView.value = 'detail'
  loading.value = true
  const res = await fetch(`/api/detail?id=${itemId}`)
  detailData.value = await res.json()
  loading.value = false
}
</script>

• 两个API的入参和出参要提前约定好，详情API必须支持传入列表项的唯一ID查询对应数据
• 如果不需要保留列表滚动位置，可以直接用条件渲染切换组件；如果需要保留状态，可以用v-show（Vue）或者CSS display控制显隐，组件不会被销毁
• 可以根据需求加加载态、错误态的处理，提升用户体验

内容的提问来源于stack exchange，提问作者Developer18