顯示來自 Firestore 的數據

Question

我試圖在我的 swiftUI 應用程序中顯示我從 firestore 取回的數據，但遇到了一些問題。

這是我獲取數據的地方

import Foundation
import Firebase

class RecipesViewModel: ObservableObject {
    
    @Published var userRecipes = [RecipesData]()
    
    func getData() {
        
        // Get a reference to the database
        let db = Firestore.firestore()
        
        // Read the documents at a specific path
        db.collection("Recipes").getDocuments { snapshot, error in
            
            // Check for errors
            if error == nil {
                // No errors
                
                if let snapshot = snapshot {
                    
                    // Update the list property in the main thread
                    DispatchQueue.main.async {
                        
                        
                        self.userRecipes = snapshot.documents.map { d in
                            
                            return RecipesData(id: d["id"] as? String ?? "", name: d["name"] as? String ?? "", cuisine: d["cuisine"] as? String ?? "", difficulty: d["difficulty"] as? String ?? "", dishType: d["dishType"] as? String ?? "", prepMins: d["prepMins"] as? Int ?? 0, prepHours: d["prephours"] as? Int ?? 0, cookMins: d["cookMins"] as? Int ?? 0, cookHours: d["cookHours"] as? Int ?? 0, restMins: d["restMins"] as? Int ?? 0, restHours: d["restHours"] as? Int ?? 0, likes: d["lkies"] as? Int ?? 0)
                        }
                    }
                    
                    
                }
            }
            else {
                
            }
        }
    }
    
}

這是存儲數據的地方

import SwiftUI
import FirebaseFirestoreSwift

struct RecipesData: Identifiable{
    var id: String
    var name: String
    var cuisine: String
    var difficulty: String
    var dishType: String
    var prepMins: Int
    var prepHours: Int
    var cookMins: Int
    var cookHours: Int
    var restMins: Int
    var restHours: Int
    var likes: Int
}

我可以獲得數據，如果我選擇在列表中顯示每個食譜的名稱，我就可以做到這一點。

但是我想做的是在顯示時讓我的數據也像這樣

import SwiftUI

struct AllRecipesView: View {
    
    @ObservedObject var model = RecipesViewModel()
    private var gridCollum = [GridItem(.flexible(),spacing: 0), GridItem(.flexible(),spacing: 0)]
    
    var body: some View {
        VStack{
            LazyVGrid(columns: gridCollum, spacing: 0){
                ForEach(model.userRecipes) {item in
                    overlayView()
                }
            }
        }
    }
    init(){
        model.getData()
    }
}

struct AllRecipesView_Previews: PreviewProvider {
    static var previews: some View {
        AllRecipesView()
    }
}


struct overlayView:View{
    
    @ObservedObject var model = RecipesViewModel()
    
    var body: some View{
        ForEach(model.userRecipes) {item in
            VStack{
                VStack{
                    Spacer()
                    HStack{
                        HStack{
                            Image(systemName: "star")
                                .foregroundColor(.white)
                                .font(.system(size: 20))
                            Text(item.likes)
                                .foregroundColor(.white)
                                .font(.system(size: 15))
                            
                        }
                        .padding(.trailing)
                        Text(item.prepMins)
                            .foregroundColor(.white)
                            .font(.system(size: 15))
                            .padding(.horizontal)
                        
                    }
                    .padding(.bottom)
                }
                .frame(width:180,height:130)
                .background(Color.red)
                .cornerRadius(8)
                .shadow(color: .black, radius: 3, x: 2, y: 2)
                .padding(.bottom)
                Text("Salmon and Rice")
                Text("Some User")
            }
            
        }
    }
    init(){
        model.getData()
    }
}

但是我不斷收到錯誤消息，說No exact matches in call to initializer

Text(item.likes)

和

Text(prepMins)

我該如何解決我的錯誤

Answer 1

嘗試類似此示例代碼的操作，使用@StateObject var model = RecipesViewModel()並使用@EnvironmentObject傳遞它。 要修復您收到的錯誤，請記住Text()需要一個字符串，例如Text(String(item.likes))或Text("\(item.likes)") 。

struct AllRecipesView: View {
    
    @StateObject var model = RecipesViewModel() // <-- here
    
    private var gridCollum = [GridItem(.flexible(),spacing: 0), GridItem(.flexible(),spacing: 0)]
    
    var body: some View {
        VStack{
            LazyVGrid(columns: gridCollum, spacing: 0){
                ForEach(model.userRecipes) {item in
                    OverlayView()
                }
            }
        }
        .environmentObject(model)  // <-- here
        .onAppear {
            model.getData()  // <-- here
        }
    }
}

struct OverlayView:View{
    
    @EnvironmentObject var model: RecipesViewModel // <-- here
    
    var body: some View{
        ForEach(model.userRecipes) {item in
            VStack{
                VStack{
                    Spacer()
                    HStack{
                        HStack{
                            Image(systemName: "star")
                                .foregroundColor(.white)
                                .font(.system(size: 20))
                            Text(String(item.likes)) // <-- here
                                .foregroundColor(.white)
                                .font(.system(size: 15))
                            
                        }
                        .padding(.trailing)
                        Text(String(item.prepMins))  // <-- here
                            .foregroundColor(.white)
                            .font(.system(size: 15))
                            .padding(.horizontal)
                        
                    }
                    .padding(.bottom)
                }
                .frame(width:180,height:130)
                .background(Color.red)
                .cornerRadius(8)
                .shadow(color: .black, radius: 3, x: 2, y: 2)
                .padding(.bottom)
                Text("Salmon and Rice")
                Text("Some User")
            }
        }
    }
}