如何在 AngularJs 组件中使用嵌入 Angular UiGrid

问题描述

我尝试在组件中嵌入 ui-grid,但嵌入的 ui-grid 不呈现

我构建了一个 Plnkr 来可视化问题。

index.html

<!doctype html>
<html ng-app="app">
  <head>
    <scripts> ... </script>
  </head>
  <body>
    <div ng-controller="MainCtrl as $ctrl">
      DataGrid in HTML
      <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
      <h1>Template/ Component</h1>
      <hero-detail hero="$ctrl.hero" myData="$ctrl.myData"}"</hero-detail>
    </div>
    
    <script src="app.js"></script>
  </body>
</html>

app.js

angular.module('app',['ngTouch','ui.grid'])
  .controller('MainCtrl',MainCtrl)
  .component('heroDetail',{
  template: `
      <div>
        DataGrid in Template
        <div id="grid1" ui-grid="{ data: $ctrl.myData }" class="grid"></div>
        <span>Name: {{$ctrl.hero.name}}</span>
        
      </div>
  `,bindings: {
    hero: '=',myData: '='
  }
});

function MainCtrl() {
  this.hero = {name: 'Spawn'};
  this.myData = [
    {
        firstName: "Cox",lastName: "Carney",company: "Enormo",employed: true
    },...
  ];
}

您知道如何找到可行的解决方案吗?

感谢您的投入!

解决方法

看这个github,组件中所有的camelCase绑定在html中都被翻译成kabab-case。所以你在 import time import smtplib import lxml import requests from bs4 import BeautifulSoup import csv import re from datetime import datetime import os.path INTERVAL = 10 INTERVALTIMEOUT = 1 def checkInternetRequests(url='http://www.google.com/',timeout=3): try: #r = requests.get(url,timeout=timeout) r = requests.head(url,timeout=timeout) print('Connection funktioniert') print(r) return True except requests.ConnectionError as ex: print(ex) return False def supremeJostensGoldRing(): URL = 'https://stockx.com/de-de/supreme-jostens-world-famous-champion-ring-gold' NAME = 'Supreme Jostens Gold Ring' headers = { "User-Agent": 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,like Gecko) Chrome/79.0.3945.79 Safari/537.36'} file_exists = os.path.isfile("Supreme_Jostens_Gold_Ring.csv") if not file_exists: with open('Supreme_Jostens_Gold_Ring.csv','w+') as f: f.write('ID,Datum,Uhrzeit,Datum mit Uhrzeit,Preis\n') with open('Supreme_Jostens_Gold_Ring.csv','r+') as csv_file: fieldnames = ['ID','Datum','Uhrzeit','Datum mit Uhrzeit','Preis'] writer = csv.DictWriter( csv_file,fieldnames=fieldnames,lineterminator='\n') entry = len(csv_file.readlines()) page = requests.get(URL,headers=headers) soup = BeautifulSoup(page.content,"lxml") search_for_class = soup.find_all( 'div',class_="sale-value") print(search_for_class) x = str(soup.find('div',class_="sale-value")) preis = str(re.sub("<.*?>","",x)) datum = datetime.now().strftime('%Y-%m-%d') uhrzeit = datetime.now().strftime('%H:%M:%S') dateTime = datetime.now().strftime('%Y-%m-%d %H:%M:%S') new_line = '\n' print(NAME) print(preis) print(datum) print(uhrzeit) print(dateTime) print(new_line) writer.writerow({ 'ID': entry,'Datum': datum,'Uhrzeit': uhrzeit,'Datum mit Uhrzeit': dateTime,'Preis': preis }) csv_file.flush() entry += 1 # while checkInternetRequests() == True: # nikeAirRubberDunkOffWhiteGreenStrike() # nikeCourtPurple() # supremeJostensGoldRing() # time.sleep(INTERVAL * 60) if checkInternetRequests() == True: supremeJostensGoldRing() time.sleep(INTERVAL * 60) else: if checkInternetRequests() == False: try: checkInternetRequests() if checkInternetRequests == True: supremeJostensGoldRing() time.sleep(INTERVAL * 60) except ValueError as err: print(err) 中的组件引用需要更改为

index.html

进入

<hero-detail hero="$ctrl.hero" myData="$ctrl.myData"></hero-detail>

另外,附注,您有一个错字,其中 <hero-detail hero="$ctrl.hero" my-data="$ctrl.myData"></hero-detail> 需要更改为 ="$ctrl.myData"}"</hero-detail>