CSSグリッドレイアウトでの* ngForの使い方1列にすべてを表示する

Question

私は一般的にプログラミングやWeb開発を始めていません。私は個人的なウェブサイトを作る過程にある。

私はあなたがここで見るものに似て4列でグリッドにボックスを配置する：https://devpost.com/software/search?query=is%3Afeatured

これらのボックスの各オブジェクトを表し、私はへのデータの一部を表示できるようにしたいですボックスをクリックすると、ポップアップダイアログの残りのデータが表示されます。

最近では人気が高まっているCSSグリッドレイアウトを使用して遊んでいます（このビデオは高く評価しています：https://www.youtube.com/watch?v=7kVeCqQCxlk）。

div要素の束をラッパーdivにハードコードすると、4列のものが機能します。しかし、データの配列を含むラッパーで* ngForを使用し、各繰り返しから内部のdiv要素にデータをフィードすると、グリッドレイアウトが破棄され、すべてが1つの列に配置されます。

私は手動で複数のdiv要素（ここではITEM2）を使用してデータにフィードする場合、必要に応じて、それが動作：

* ngForを使用して

.wrapper { 
 
    margin-left: 1em; 
 
    margin-right: 1em; 
 
    display: grid; 
 
    grid-template-rows: auto; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    grid-row-gap: 1em; 
 
    grid-column-gap: 1em; 
 
}

<div class="wrapper"> 
 

 
    <div class="item2" style="background-color: deepskyblue;"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
    </div> 
 

 
    <div class="item2" style="background-color: deepskyblue;"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
    </div> 
 

 
    <div class="item2" style="background-color: deepskyblue;"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
    </div> 
 

 
    <div class="item2" style="background-color: deepskyblue;"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
    </div> 
 

 
    <div class="item2" style="background-color: deepskyblue;"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
    </div> 
 
    
 
</div>

...それはの長さのために走ります配列 "stickyNotes"は、各行の下にのみボックスを積み重ねます。この周り

<div class="wrapper" *ngFor="let s of stickyNotes; let i = index" > 
 
    <div class="item2" style="background-color: deepskyblue;"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
     <p>{{s.title}}</p> 
 
    </div> 
 
</div>

私のハックだった...私は（などI + 1、I + 2）* ngIfに1ずつ増加して、このdiv要素を4回を持っています。問題は、新しい行が始まると、CSSのgrid-row-gapが無視されるということです。

<div class="item2" style="background-color: deepskyblue;" *ngIf="i < stickyNotes.length && i%4 === 0"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
     <p>{{stickyNotes[i].title}}</p> 
 
</div> 
 

 
<div class="item2" style="background-color: deepskyblue;" *ngIf="i+1 < stickyNotes.length && i%4 === 0"> 
 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
 
     <p>more text here.</p> 
 
     <p>{{stickyNotes[i+1].title}}</p> 
 
</div> 
 

 
<!--2 more times until i+3-->

グリッドプロパティを破壊することなく、かつ4倍（またはその他の方法）をコード化ITEM2クラスをせずに、カスタム反復可能なディレクティブを作成する方法がある場合、私は疑問に思って。

私はブートストラップの行と列の属性を試しましたが、4列の場合、応答性はグリッドレイアウトほど良くありませんでした。

ご協力いただきありがとうございます。

Answer 1

*あなたがに追加要素を繰り返しngFor。単にdiv.item2の上に置くと、それが動作するはずです：ベガによって提供さ

<div class="wrapper" > 
    <div class="item2" *ngFor="let s of stickyNotes; let i = index" style="background-color: deepskyblue;" > 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
     <p>more text here.</p> 
     <p>{{s.title}}</p> 
    </div> 
</div> 

答えは（限り、あなたはdiv.item2要素の上に別のstructural directiveを入れないと）あまりにも動作しますが、<ng-container>が必要とされていない、ので、アスタリスクは唯一のシンタックスシュガーであるとsomething similarに展開：

<div class="wrapper" > 
    <ng-template ngFor let-s [ngForOf]="stickyNotes" let-i="index"> 
    <div class="item2" style="background-color: deepskyblue;"> 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test" > 
     <p>more text here.</p> 
     <p>{{s.title}}</p> 
    </div> 
    </ng-template> 
</div> 

要素ごとに1つの構造的なディレクティブの制限の背後にある理由はgiven hereです：

いつか特定の条件が満たされている場合に限り、HTMLのブロックを繰り返したいと思うでしょう。 * ngForと* ngIfの両方を同じホスト要素に入れようとします。角はあなたをさせません。要素に構造指示文を1つだけ適用することができます。

理由は簡単です。構造ディレクティブは、ホスト要素およびその子孫と複雑な処理を行うことができます。 2つのディレクティブが同じホスト要素に優先順位をつけている場合、どちらが優先されますか？ NgIfとNgForのどちらが先に進むべきですか？ NgForがNgForの効果をキャンセルできますか？そうであれば、Angularは他の構造指令を取り消す能力をどのように一般化するべきですか？

これらの質問に簡単な回答はありません。複数の構造ディレクティブを禁止すると、それが問題になります。このユースケースには簡単な解決策があります：* ngForを* ngFor要素をラップするコンテナ要素に置きます。 1つまたは両方の要素がng-containerであるため、余分なレベルのHTMLを導入する必要はありません。

Answer 2

は、この構文を試してみてください：

<div class="wrapper"> 
    <ng-container *ngFor="let s of stickyNotes; let i = index"> 
    <div class="item2" style="background-color: deepskyblue;"> 
     <img class="img-responsive img-rounded" src="assets/Logo/square_filler.png" alt="pic-test"> 
     <p>more text here.</p> 
     <p>{{s.title}}</p> 
    </div> 
    </ng-container> 
</div>