小编Ser*_*dez的帖子

所以我在angular2中有这个应用程序,我需要水平滚动组件,但左右按钮.所以我需要一个功能,每个按钮滚动到右边或左边的内容.我需要这样的东西:

我尝试过使用document.getElementById('myscrolldiv').animate({ scrollLeft: "-=" + 250 + "px"; }但是Angular无法识别该animate行.

所以我正在寻找一种使用按钮水平滚动但不使用jquery的不同方法.有角度吗？

这是我的HTML

<div class="container">
  <div class="side">
    <mat-icon (click)="scrollLeft()">keyboard_arrow_left</mat-icon>
  </div>
  <div id="widgetsContent" class="middle">
    <div class="scrolls">
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
      <div class="info-widget">
         WIDGET
      </div>
    </div>
  </div>
  <div class="side">
    <mat-icon (click)="scrollRight()">keyboard_arrow_right</mat-icon>
  </div>
</div>

这是我的CSS

.container {
  display: flex;
  height: 22.5vh !important;
}

.side {
  width: 50px;
  height: 22.5vh !important;
}

.middle {
  flex-grow: 1; …

我想在html中显示出版物的城市,州和国家的名称.但他们在不同的表格中.

这是我的models.py

class country(models.Model):
    country_name = models.CharField(max_length=200, null=True)
    country_subdomain = models.CharField(max_length=3, null=True)
    def __str__(self):
        return self.country_name

class countrystate(models.Model):
    state_name = models.CharField(max_length=200, null=True)
    country = models.ForeignKey(country, on_delete=models.CASCADE, null=True)
    importance = models.IntegerField(null=True)
    def __str__(self):
        return self.state_name

class city(models.Model):
    city_name = models.CharField(max_length=200, null=True)
    countrystate = models.ForeignKey(countrystate, on_delete=models.CASCADE, null=True)
    def __str__(self):
        return self.city_name

class publication(models.Model):
    user = ForeignKey(users, on_delete=models.CASCADE, null=False)
    title= models.CharField(max_length=300, null=True)
    country=models.ForeignKey(country, on_delete=models.CASCADE, null=True)
    countrystate=models.ForeignKey(countrystate, on_delete=models.CASCADE, null=True)
    city=models.ForeignKey(city, on_delete=models.CASCADE, null=True)

    def __str__(self):
        return self.title

这是我的views.py

def publications(request):
    mypublications = publication.objects.filter(user_id=request.session['account_id'])
    dic.update({"plist": …

我在我的角度应用程序中遇到了这个问题。我在mat-radio-group中有很多选项，但是这些都是根据json对象动态放置的。像这样：

这是json对象

{
  "list": [
    {"name": "some name 1", ID: "D1"},
    {"name": "some name 2", ID: "D2"}
  ]
}

在此示例中，列表中只有两个对象，但可以是9、20或任意数量的对象。

所以我想在我的html中是，无论列表中有多少个对象，即使列表更改，只是第一个对象保持选中状态，都只会选择第一个对象。

这是我的html：

<mat-radio-group name="opList"  fxLayout="column">
  <mat-radio-button *ngFor="let op of listOfOptions"  name="opList" >{{ op.name}}</mat-radio-button>
</mat-radio-group>

该listOfOptions变量具有JSON对象。

我如何始终将选择的第一个对象设置为？

角4。

我需要帮助来设置垫选的选项，所以这是问题所在：

1.首先我得到两个变量：options和checkedOptions

options: string[];
checkedOptions: string[] //This comes from the BD; 

2.所以选项是所有选项，而checkedOptions来自BD，如下所示：

options = ["o1", "o2", "o3", "o4", ... "oN"]
checkedOptions = ["o2", "o4"]

3.我打印如下选项：

<mat-form-field floatPlaceholder="always" color="accent" class="input-all">
  <mat-select multiple placeholder="{{ par.label }}">
    <mat-option *ngFor="let op of options" [value]="op">{{ op }}</mat-option>
  </mat-select>
</mat-form-field>

4. 所以在mat-select中是所有选项...但是我想要的是在options列表中，只需检查列表中的哪个即可checkedOptions。我怎么做？

请帮忙。

我在 Angular4 应用程序中有一个动态的 mat-select。我需要的是：当我填写 mat-select 选项时，我需要将所有选项设置为选中状态。我尝试了很多瘦身，但没有一个奏效。请帮忙。

这是我得到的：

ts：

options = {
    0: 'op1',
    1: 'op2',
    2: 'op3',
    3: 'op4'
  };

但options变量可以改变。有时长度可以是5，有时可以是16，有时是0，即动态。

然后，在我的 HTML 中，我得到了这个：

<mat-select multiple placeholder="Options" required="true" [(ngModel)]="selected-options">
  <mat-option *ngFor="let op of options" [value]="op">{{ op }}</mat-option>
</mat-select>

查看multiplemat-select 标签中的 。

这有效！但这只是在选择中设置选项并且未选中该值。

那么......我如何设置所有检查项目？

我正在 Angular 9 应用程序中工作，并且仅当我的应用程序状态 (ngrx) 具有属性 != null 时，我才尝试加载（或不加载）特定模块

首先，我的路线中有一个 AuthGuard，但带有 canActivate。所以我希望“仪表板”模块仅在 mt AppState 有令牌时加载

这是我的路线文件

const routes: Routes = [
{
  path: '',
  component: AppLayoutComponent,
  canActivate: [ AuthGuard ],
  children: [
    { path: '',  loadChildren: () => import('./pages/modules/dashboard/dashboard.module').then(m => m.DashboardModule) }
  ]
},
{
  path: '',
  component: AuthLayoutComponent,
  children: [
    { path: 'session',  loadChildren: () => import('./pages/modules/session/session.module').then(m => m.SessionModule) }
  ]
},
{
  path: '**',
  redirectTo: 'session/not-found'
}];

这是我的 AuthGuard。它 localestorage 没有会话，然后重定向到登录页面。

@Injectable()
export class AuthGuard implements CanActivate { …

我正在开发 Angular 14 应用程序，并尝试制作带有动态路线的 Twitter 卡。案例如下：

1. 我有一个在线商店，显示不同的产品，显然是相同的路线，只是通过路线中的参数更改产品信息

   {
     path: 'product/:id',
     component: ProductLayoutComponent,
     children: [{ path: '',  loadChildren: () => import('./pages/section-custom/modules/product/product.module').then(m => m.ProductComponent) },  ]
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 该页面有两个按钮用于在 Facebook 和 Twitter 上分享产品的链接，这里是代码

   productId: string;
   constructor(public activatedRoute: ActivatedRoute) {
     this.activatedRoute.params.subscribe((params) => {   this.productId = params['id']; });
   }
   
   shareFacebook() {
     const facebookshare = 'https://www.facebook.com/sharer/sharer.php?u=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   
   shareTwitter() {
     const facebookshare = 'https://twitter.com/intent/tweet?url=' + this.productId;
     window.open(facebookshare, '_blank');
   }
   

   Run Code Online (Sandbox Code Playgroud)

3. 每个产品都有自己的图像、标题和描述出现在 Twitter 卡片和 Facebook 帖子中，经过多天的研究，我了解到社交网络爬虫需要读取一些元标记才能正确显示帖子和卡片，所以当我加载时我的产品有这个功能：

    productId: string;
    constructor(public activatedRoute: ActivatedRoute: public http: HttpClient,  private …

   Run Code Online (Sandbox Code Playgroud)

我在Angular v4中有一个应用程序，它必须更改访问URL的scssdependong。例如：如果浏览器中的链接为“ example.com”，则该应用程序的背景色为：黑色；如果链接为“ example2.com”，则该应用程序的背景色为：红色

我有下一个问题：

当我转到C：\ Windows \ System32 \ drivers \ etc中的主机，并在主机中设置下一个配置127.0.0.1 example.com 127.0.0.1 example2.com

然后我使用“ example.com:4200”运行该应用程序，该应用程序未运行...浏览器向我显示此消息

“无效的主机头”

我该如何解决这个问题？

我正在使用Typescript在Angular2 v4应用程序中工作，我需要一种将许多图像（base64格式）下载到Zip文件中的方法。

例如：我有一个像这样的数组（例如，伪造的base64图像）

data = [
  'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA ...',
  'data:image/png;base64, iVBTYu0KGgoBBBBNSUhYUgJJJJUA ...',
  'data:image/png;base64, CGBHHFGY0goAAAANSUhEUgAAAAUA ...',
  ...
]

我需要一种下载它的方法，该方法首先将每个图像转换为.jpg或.png图像，然后编译所有图像并将其下载为zip文件。这样的东西（我不知道代码，我只需要这样的东西）

downloadZip() {
  const arrayAsJPG = [];
  this.data.forEach(i => {
    const imageInJpg = i.convertToJPGfile(); // this is not code, this is a function that converts the base64 to a jpg file
    arrayAsJPG.push(imageInJpg);
  });
  ZipFileSaver.save(arrayAsJPG, 'myImageReport.zip'); // this isn't code neither, just and interpretation of what I need

}

有什么办法做到这一点？

我需要在地图上放置两个浮动面板，但float: right不起作用。请帮忙。

我尝试了一切，但似乎position: absolute禁用了float: right或其他东西。

有没有办法将第二个面板（#floating-panel2）向右对齐而不改变第一个面板（#floating-panel1）的对齐方式？

我需要这样的东西：

这是我的 html 和 css：

    #wrapper { position: relative; }

    #floating-panel1 {
      position: absolute;
      width: 265px;
      top: 55px;
      left: 5px;
      z-index: 5000;
      background-color: rgb(66, 72, 79);
      padding: 5px;
      border: 1px solid rgb(66, 72, 79);
      border-radius: 1px;
    }
    
    #floating-panel2 {
      position: absolute;
      width: 265px;
      top: 55px;
      left: 0px;
      z-index: 5000;
      background-color: rgb(66, 72, 79);
      padding: 5px;
      border: 1px solid rgb(66, 72, 79);
      border-radius: 1px;
      float:right;
    }

<div id="wrapper" style="height: …