仅显示一次复选框，而不显示多次

Question

我有一个NgFor循环，用于在“头”选项卡中创建“不同的卡”，然后遍历元素并将信息放入相应的卡类型中。如果有一种新的数据类型，那么我将创建一个新的标题并将信息放在该标签中。

HTML代码：

          <mat-tab-group>
          <mat-tab *ngFor="let address of distinctAdressType" label="{{ address }}">
          <div *ngFor="let element of sampleData.address">
          <div *ngIf="address.toString() === element.addressType">
          <mat-label>
          <span>Address: {{ element.addressLine1 + ' ' + element.addressLine2 + ' ' + element.addressLine3 }}</span>
          </mat-label>
          <br />
          <mat-label> City: {{ element.city }}</mat-label> <br />
          <br />
          </div>
          </div>
          </mat-tab>
          </mat-tab-group>

我想显示一个mat-checkbox，但是如果我编写代码，那么每个地址我都会得到一个checkbox，但是我想要一个checkbox，但是我要实现一个复选框。使用索引仅在第一行显示复选框，但是如何在此处显示呢？

我希望在第一行上没有一个复选框，而不是每行有多个复选框。

Answer 1

将 mat-checkbox 标记放在 mat-tab 出口标记下的* ngFor标记之外，并在该标记上使用css，例如float: right

Answer 2

您有循环的检查索引，我只是更新您的代码，希望对您有所帮助。谢谢

I/flutter (11665): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════ I/flutter (11665): The following assertion was thrown while handling a gesture: I/flutter (11665): No MaterialLocalizations found. I/flutter (11665): HomePage widgets require MaterialLocalizations to be provided by a Localizations widget ancestor. I/flutter (11665): Localizations are used to generate many different messages, labels,and abbreviations which are used I/flutter (11665): by the material library. I/flutter (11665): To introduce a MaterialLocalizations, either use a  MaterialApp at the root of your application to I/flutter (11665): include them automatically, or add a Localization widget with a MaterialLocalizations delegate. I/flutter (11665): The specific widget that could not find a MaterialLocalizations ancestor was: I/flutter (11665):   HomePage I/flutter (11665): The ancestors of this widget were: I/flutter (11665):   [root] I/flutter (11665): When the exception was thrown, this was the stack: I/flutter (11665): #0      debugCheckHasMaterialLocalizations.<anonymous closure> (package:flutter/src/material/debug.dart:124:7) I/flutter (11665): #1  debugCheckHasMaterialLocalizations (package:flutter/src/material/debug.dart:127:4) I/flutter (11665): #2  showDialog (package:flutter/src/material/dialog.dart:701:10) I/flutter (11665): #3      _HomePageState.showTheDialog (package:max/pages/home.dart:29:5) I/flutter (11665): #4     
_HomePageState.build.<anonymous closure> (package:max/pages/home.dart:154:30) I/flutter (11665): #5     
_InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:513:14) I/flutter (11665):
#6      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:568:30) I/flutter (11665):
#7      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:166:24) I/flutter (11665): #8      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:246:9) I/flutter (11665): #9    TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:175:7) I/flutter (11665): #10   PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:436:9) I/flutter (11665): #11     PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:73:12) I/flutter (11665): #12     PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:101:11) I/flutter (11665): #13    
_WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:214:19) I/flutter (11665):
#14     _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:192:22) I/flutter (11665):
#15     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:149:7) I/flutter (11665):
#16     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:101:7) I/flutter (11665):
#17     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:85:7) I/flutter (11665):
#21     _invoke1 (dart:ui/hooks.dart:223:10) I/flutter (11665): #22     _dispatchPointerDataPacket (dart:ui/hooks.dart:144:5) I/flutter (11665): (elided 3 frames from package dart:async) I/flutter (11665): Handler: onTap I/flutter (11665): Recognizer: I/flutter (11665):   TapGestureRecognizer#b0516(debugOwner: GestureDetector, state: possible, won arena, finalPosition: I/flutter (11665):   Offset(299.0,
544.2), sent tap down) I/flutter (11665): ════════════════════════════════════════════════════════════════════════════════════════════════════ I/flutter (11665): Another exception was thrown: No MaterialLocalizations found.