應該如何做呢?

我之前用java, javascript 和 jquery 做了一個編更網站

如果我想這個網站轉用angular 來做front end,我想問幾個問題:

  1. 我想這個網頁一開紿就顯示當月的更表, 當用戶按紅圈那個兩箭頭,它就會顯示上一個月或下一個月的更表, 這個應該用什麼方法去做呢?

  2. 籃色框和橙色框內的data 是來自兩個 JSP 的,

  3. 另外,綠色框內的data是在browser 計算的,那應該用什麼方法去做呢?

因為我是新手不知道用方法去做才好。

先撇開是否有使用框架跟實做細節,就問題本身去思考,你覺得應該要怎麼做,預期會有那些動作跟流程,如過是新手,更不能錯過任何思考的機會

OK, 現在我就在盲試中,如果再有問題可以再問嗎?就算你不怕麻煩時,因為我是"老派"人,由於對新東西不了解,所以只會"新瓶舊酒",這是我有時不知道怎樣問就是這個原因。

所以才要回到基本做思考,而不是拘泥於技術層面,先想清楚需求間的關係,之後只是技術熟悉的問題,因為不管使用什麼技術,都是用來解決問題的。

不要有以前某技術是這樣子做,所以在學新技術時,也應該要這樣子。這樣會讓你學的很辛苦

這陣子,我在嘗試用angular 來試做,我的設計是這樣的, 將整個table 設定為一個component,
而在這table 以下,將藍色和橙色的部份分為兩個component,最終目標是橙色的部份內的小格是可以extends 的,
可以在做admin. function 時在這些小格可以再加其他function 和 feature。

可是後來這個設計不好控制,於是改為將component blue 的內容放回入table component 裡,
發覺控制問題好像解決了,但是component orange 內的HTML 和 app.component html 內的html 不相容,
即是table和component orange最左手邊的那個cell 的闊度不同,我也嘗試用div 來做table ,
可是table右手邊又有rowspan 和colspan 的問題,就算有解決方案,幾個div 的top border 都不能對齊,
即是有些DIV高了一點,有些DIV低了一點,以上是我用DIV , flex box 和grid 來做的結果,不知道angluar 有沒有其他 解決之道呢?

給你個參考方向

類似的方式我都試過,可是就卡住在"Can’t bind to itoRoster since it isn’t a known property of tbody":

另外,請問這一招有沒有名稱的? 如果有可以讓我去google 一下。

app-roster-body 的 component 有設定 input 嗎?

有呀

import { Component, Input, OnInit } from '@angular/core';
import { ITORoster } from 'src/app/classes/itoroster';

@Component({
   selector: 'app-roster-body',
   templateUrl: './roster-body.component.html',
   styleUrls: ['./roster-body.component.css']
 })
export class RosterBodyComponent implements OnInit {
  @Input() itoRoster: ITORoster;
  constructor() { }

  ngOnInit() {
  }
}
selector: 'app-roster-body',

這裡寫法要改一下,

selector: '[app-roster-body]',

這樣才吃的到

當 selector 單純寫 app-roster-body,在 html 上面要使用該 component 是 <app-roster-body></app-roster-body>

而這裡是要將此 component 當作 directive 使用,所以要加上 [ ] 才能變成屬性, 使用方式也會改成 <div app-roster-body></div>

2個讚

原來只差這一點點,it works!!!
thank you very much:grinning:

那麼這個沒有"[]"的寫法,為什麼在stackblitz就沒有問題,而我卻遇上問題呢?

我沒有遇過你的那個現象,我同樣的程式碼在 stackblitz 上,沒有 [ ] 是會壞掉的